如何动态更改所选选项并更新而不重新加载？

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.

我正在使用这个外部网页:https://espacepersonnel.bnf.fr/views/mes_notices.jsf(需要记录),我试图用值=“0的那个覆盖默认选择的选项”。我写的自定义js代码确实提交了表单,但只在页面加载后才提交。不过我想在此之前更改选择值。

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

这是我自己的'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)

你能看到我的解决方案吗? (如果只有JS,那就更好)

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

非常感谢你阅读这篇文章并尽可能地回答它。

Bigindian.

P.S : Pardon my english

P.S:原谅我的英语

N.B : Result page :

N.B:结果页面:

result page

1 个解决方案

#1

You can try the following:

您可以尝试以下方法:

get a reference to the select

获得对select的引用

loop over its options

循环其选项

if the value of the option is '0', select it. Otherwise, deselect it.

如果选项的值为“0”,请选择它。否则,取消选择它。

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

#1