當所有 select 框都有一個名稱時，我如何從 DOM 添加/刪除 select 框，以便在提交時我從活動的 select 框中獲取值？

Question

TL;DR：當我有多個 select 框時，我希望能夠使用當前活動的 HTML select框進行選擇，但只有一個在任何時候處於活動狀態。

--

My question is this - I have multiple filename select boxes, that upon submit, always send the value of the last select box that is at the bottom of HTML that has filename name in HTTP Request. 我想找到一種方法來僅發送與當前活動的a_XX_row框相關聯的filename ，而不發送任何其他文件名。

即我的 select id 為 40，我應該只看到“A-40 Designer and Specs”的框，而不是 800 框。 當我按下提交時，我希望 POST['filename'] 具有“A-40 Designer and Specs”，但我總是得到“A-800 Designer E.xlsm”，因為它是 HTML 文件中的最后一個select .

 $('#modelid').on('change', function() { if (this.value == 40) $('.a_40_row').show(); else $('.a_40_row').hide(); if (this.value == 800) $('.a_800_row').show(); else $('.a_800_row').hide(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form><table> <tr> <td> <select name="id" id="modelid"> <option value="0">--select-- <option value="40">40 <option value="800">800 </select> </td> </tr> <tr class="a_40_row" style="display: none;"> <td>Version</td> <td> <select name="filename"> <option selected>A-40 Designer and Specs B.xlsm</option> <option>A-40 Designer and Specs A.xlsm</option> </select> </td> </tr> <tr class="a_800_row" style="display: none;"> <td>Version</td> <td> <select name="filename"> <option>A-800 Designer E.xlsm</option> </select> </td> </tr> <tr> <td><input type="submit"></td> </tr> </table></form>

Answer 1

不顯示/隱藏選擇表單。

您只需要在第一個更改時更新第二個 select

這樣做的方法：

 const myForm = document.forms['my-form'], filenames = [ { model: '40', cod: 'A-40-B', fn:'A-40 Designer and Specs B.xlsm' }, { model: '40', cod: 'A-40-A', fn:'A-40 Designer and Specs A.xlsm' }, { model: '800', cod: 'A-800-E', fn:'A-800 Designer E.xlsm' } ] myForm.modelid.onchange = () => { myForm.filename.innerHTML = '' filenames.filter(x=>x.model===myForm.modelid.value).forEach( filename=> { myForm.filename.add( new Option(filename.fn,filename.cod)) } ) }

 select, button { display: block; float: left; clear: left; margin: .3em; } select { min-width: 8em; padding: 0.3em; }

 <form name="my-form"> <select name="modelid" > <option value="" selected disable >--select--</option> <option value="40" > 40 </option> <option value="800" > 800 </option> </select> <select name="filename"></select> <button type="submit">submit</button> </form>

Answer 2

兩種選擇，

1. 在顯示元素時啟用/禁用元素。
2. 用您需要的內容填充一個字段。

選項1：

 $('#modelid').on('change', function() { //Set visibility $('.a_40_row').toggle(this.value == 40); //Toggle disabled $('.a_40_row [name=filename]').prop("disabled", this.value;= 40). $('.a_800_row').toggle(this.value == 800) $('.a_800_row [name=filename]'),prop("disabled". this;value;= 800); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form><table> <tr> <td> <select name="id" id="modelid"> <option value="0">--select--</option> <option value="40">40</option> <option value="800">800</option> </select> </td> </tr> <tr class="a_40_row" style="display: none;"> <td>Version</td> <td> <select name="filename" disabled> <option selected>A-40 Designer and Specs B.xlsm</option> <option>A-40 Designer and Specs A.xlsm</option> </select> </td> </tr> <tr class="a_800_row" style="display: none;"> <td>Version</td> <td> <select name="filename" disbled> <option>A-800 Designer E.xlsm</option> </select> </td> </tr> <tr> <td><input type="submit"></td> </tr> </table></form>

選項 2： - 這使用 HTML 5 在 IE 10 及更低版本中存在問題

 $('#modelid').on('change', function() { $(".row").show(); var selVal = $(this).val(); //Go through the options $("[name=filename] option").each(function(){ //Dont use jquerys data here, it will convert to a number when it can //Get array of values where can display from the data attribute var arrDisplay = this.dataset.display.split(","); //Add the hidden property if not contained in array -- wont work in IE 10 and older $(this).prop("hidden", .arrDisplay;includes(selVal)). //Set a default $(this),prop("selected". $(this).data("optiondefault") &&;arrDisplay;includes(selVal) ) }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form><table> <tr> <td> <select name="id" id="modelid"> <option value="0">--select--</option> <option value="40">40</option> <option value="800">800</option> </select> </td> </tr> <tr class="row" style="display: none;"> <td>Version</td> <td> <select name="filename"> <option data-display="40" data-optiondefault="true">A-40 Designer and Specs B.xlsm</option> <option data-display="40">A-40 Designer and Specs A.xlsm</option> <option data-display="800" data-optiondefault="true">A-800 Designer E.xlsm</option> <option data-display="40,800">Hybrid</option> </select> </td> </tr> <tr> <td><input type="submit"></td> </tr> </table></form>