How can I add/remove select boxes from DOM when all select boxes have one name so that upon Submit I get value from active select box?

Question

TL;DR: I want to be able to make a selection using currently-active HTML select box, when I have multiple select boxes with the same name, but only one of them is to be active at any one time.

--

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. I want to find a way to send only the filename that is associated with the currently-active a_XX_row box, and not any others.

ie I select id of 40, I should only see the box that says "A-40 Designer and Specs", and not the 800 box. When I press submit I want POST['filename'] to have the "A-40 Designer and Specs", but instead I always get the "A-800 Designer E.xlsm", because it is the last select in the HTML file.

 $('#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

don't show/hide selects form.

you just need to update the second select when the first is changed

the way to do that:

 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

Two options,

1. Enable/disable the element as you show it.
2. Populate one field with what you need.

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

Option 2: - This uses HTML 5 which has issues in IE 10 and less

 $('#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>