如何在不重新加载的情况下动态更改所选选项并更新？

Question

很难找到适合搜索的术语（如果该主题已经讨论过，请原谅）以及此 post.

的明确标题

我正在处理这个外部网页：https://espacepersonnel.bnf.fr/views/mes_notices.jsf（需要记录）我正在尝试用值 =“0”的选项覆盖默认的 selected 选项。我编写的自定义 js 代码确实提交了表单，但仅在页面加载后才提交。不过我想在此之前更改 select 值。

这是此页面的相关代码部分（当然我无法编辑）：

<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 更好）

非常感谢您阅读本文 post 并尽可能回答。

比金迪安。

P.S : 请原谅我的英语

N.B : 结果页面：

result page

Answer 1

您可以尝试以下方法：

获取对 select
遍历其选项
如果选项的值为“0”，select它。否则，deselect它。

示例代码：

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

如何在不重新加载的情况下动态更改所选选项并更新？

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

javascript

html-select

onload

content-script