如何動態更改選定的選項並更新而不重新加載？

Question

很難找到一個好的搜索條件（所以請原諒，如果該主題已被討論）以及明確的標題這篇文章。

我正在從事這個外部網頁：https://espacepersonnel.bnf.fr/views/mes_notices.jsf（需要登錄） 我試圖用value =「0」來覆蓋默認選擇的選項。我寫的自定義js代碼確實會提交表單，但只有在頁面加載後才提交。不過，我想在此之前更改選擇值。

下面是此頁的有關代碼的一部分（即我當然不能編輯）：

<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> 

下面是我自己的「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); 
    } 

，你可以看到一個解決方案爲了我 ？ （更好，如果JS只）

非常感謝您閱讀這篇文章，並回答它，如果你可以。

Bigindian。

PS：請原諒我的英語

NB： 結果頁面：

result page

Answer 1

你可以嘗試以下方法：

• 得到一個參考選擇
• 環通過其選項
• 如果選項的值爲'0'，請選擇它。否則，取消選擇它。

示例代碼：

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