How to dynamically change the selected option and update without reloading?

Question

It was hard to find terms for a good search (so please excuse me if the topic has already been discussed) as well as an explicit title for this post.

I'm working on this external web page : https://espacepersonnel.bnf.fr/views/mes_notices.jsf (need to be logged) and I'm trying to override the default selected option with the one which value="0". The custom js code I wrote does submit the form but only after the page has been loaded. Nevertheless I'd like to change the select value before this.

Here's the concerned code's part of this page (that of course I can't edit) :

<form id="noticeComp:mainForm" name="noticeComp:mainForm" method="post" action="/views/mes_notices.jsf" class="noticeForm" enctype="application/x-www-form-urlencoded">
    <input type="hidden" name="noticeComp:mainForm" value="noticeComp:mainForm">
    <input type="hidden" name="noticeComp:mainForm:j_idt253" value="">
    <input type="hidden" name="noticeComp:mainForm:j_idt254" value="false">
    <!-- <div id="site"> -->    
    <!-- <div class="moncatagen"> -->
    <!-- <div class="col2"> -->
    <h1 class="h1small">
        <span>
            <select name="noticeComp:mainForm:j_idt256" size="1" onchange="submit()">
                <option value="0">Toutes les notices</option>
                <option value="1" selected="selected">Notices biblio.</option>
                <option value="2">Notices d'autorités</option>
            </select>               
            Notices
        </span>
    </h1>
</form>

And here's my own 'content_script' :

var elm;
var evt;

elm = document.getElementsByName('noticeComp:mainForm:j_idt256')[0];
evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);

    while(!document.getElementsByName('noticeComp:mainForm:j_idt256')[0].options[0].selected){
        document.getElementsByName('noticeComp:mainForm:j_idt256')[0].options[0].selected="selected";
        elm.dispatchEvent(evt);
    }

Can you see a solution for me ? (Better if JS only)

Thank you very much for reading this post and answering it if you can.

Bigindian.

P.S : Pardon my english

N.B : Result page :

result page

Answer 1

You can try the following:

• get a reference to the select
• loop over its options
• if the value of the option is '0', select it. Otherwise, deselect it.

Example code:

var elm = document.getElementsByName('noticeComp:mainForm:j_idt256')[0];
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);

for (var i = 0; i < elm.options.length; i++) {
    var option = elm.options[i];

  if (option.value === '0') {
    option.setAttribute('selected', 'selected');
  } else {
    option.removeAttribute('selected');
    }
}

elm.dispatchEvent(evt);

function submit() {
    // code
  console.log('gogo');
}

demo