如何動態更改所選選項並更新而不重新加載?

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


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


0  

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


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2016/04/07/72fbb622419e9181ad4b1e8e5ce07819.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com