Develop Reference

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?

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.
i.e. 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>

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>

Two options,
Enable/disable the element as you show it.
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>

How can I make dynamically created dependent select/dropdowns using just jQuery

I have a table with dynamically created rows, on each row I want to have 2 dropdowns/selects that are dependent on each other.
I have found 2 fiddles, the first is the exact output i want but the code is confusing and uses json. the second code is the easiest to understand but is not dynamic. Is there a way to make them work together?
// http://jsfiddle.net/C2xsj/5/ <----- this is the output i want but the code is kinda confusing for me
// https://jsfiddle.net/fwv18zo1/ <--- this has the simpler code
lets assume this is my table:
<INPUT type="button" value="Add Row" id="button"/>
<form id="myForm">
<TABLE id="addTable" >
<TR><TD>
<select id="selectCategory">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
</TD>
<TD>
<select id="selectSubCategory" >
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
</TD></TR>
</TABLE>
</form>
when someone clicks the add row button, it creates a new row
using something similar to this all the options are coded into this function such as ():
$('#button').click(function() {
var table = $('#addTable');
table.append('<tr><td data-label="Task"><select class="ui fluid search dropdown" required><option value="1">Fruit</option><option value="2">Animal</option><option value="3">Bird</option><option value="4">Car</option></select><select class="ui fluid search dropdown" required><option value="1">Banana</option><option value="1">Apple</option><option value="1">Orange</option><option value="2">Wolf</option><option value="2">Fox</option><option value="2">Bear</option><option value="3">Eagle</option><option value="3">Hawk</option><option value="4">BWM<option></select></tr>');
}
so my issue is that since they cant all have the same id such as the ones in the fiddle, how i make the pair of selects on each row dependent

Here i used clone function. read comment on JS to know more.
$(document).on("change",".select1",function(){
var thisParent = $(this).parents("tr"); // detect the parent of the select1.
$(".select2",thisParent).find('option[value]').addClass('hidden'); // hide all option values.
$(".select2",thisParent).find('option[value="' + this.value + '"]').removeClass('hidden'); // show only values that match the 'select1' value.
});
$(".addNew").click(function(){ // clone button
$(".cloneThis").clone().appendTo("tbody"); // clone the class 'cloneThis' and append it into tbody.
$("tr:last").removeClass("cloneThis"); // remove 'cloneThis' class from the last appended child, so you can clone it again from the original one.
$("button:last").removeClass("addNew").addClass("removeThis").html("Remove"); // replace 'Add' with 'Remove' and add class 'removeThis' to be able to remove this tr.
});
$(document).on("click",".removeThis",function(){ // remove function.
$(this).parents("tr").remove(); // find this button parent and remove it.
});
table{
width:100%;
}
select, button{
width:30%;
}
.hidden{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="cloneThis">
<td>
<select name="select1" class="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" class="select2">
<option>Select type first</option>
<option value="1" class="hidden">Banana</option>
<option value="1" class="hidden">Apple</option>
<option value="1" class="hidden">Orange</option>
<option value="2" class="hidden">Wolf</option>
<option value="2" class="hidden">Fox</option>
<option value="2" class="hidden">Bear</option>
<option value="3" class="hidden">Eagle</option>
<option value="3" class="hidden">Hawk</option>
<option value="4" class="hidden">BWM<option>
</select>
<button class="addNew">Add</button>
</td>
<tr>
</tbody>
</table>

Onchange select item value set on the next column input field for each row in jquery

I'm trying to get the selected item's data-price to set on the next column's input field. It's working for first row but not working for each row.
How do I get this done?
<td>
<select class="clientType" name="type[]">
<option value="" disabled selected>Type</option>
<option data-price="3" value="3">R</option>
<option data-price="10" value="10">EB</option>
<option data-price="3" value="3">ND</option>
<option data-price="" value="">Special</option>
</select>
</td>
<td>
<input class="clientAmt" type="number" name="amount[]">
</td>
jQuery:
$('.clientType').change(function () {
$(this).each(function() {
$('.clientAmt').val($('option:selected', this).data('price'));
})
})

remove the each and go to the closest row to find the .clientAmt
$('.clientType').change(function() {
$(this).closest('tr').find('.clientAmt').val($('option:selected', this).data('price'));
});
DEMO
$('.clientType').change(function() {
$(this).closest('tr').find('.clientAmt').val($('option:selected', this).data('price'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<select class="clientType" name="type[]">
<option value="" disabled selected>Type</option>
<option data-price="3" value="3">R</option>
<option data-price="10" value="10">EB</option>
<option data-price="3" value="3">ND</option>
<option data-price="" value="">Special</option>
</select>
</td>
<td>
<input class="clientAmt" type="number" name="amount[]">
</td>
</tr>
<tr>
<td>
<select class="clientType" name="type[]">
<option value="" disabled selected>Type</option>
<option data-price="3" value="3">R</option>
<option data-price="10" value="10">EB</option>
<option data-price="3" value="3">ND</option>
<option data-price="" value="">Special</option>
</select>
</td>
<td>
<input class="clientAmt" type="number" name="amount[]">
</td>
</tr>
</table>

Problem : The problem in your code is
$(this).each(function() {
$('.clientAmt').val($('option:selected', this).data('price'));
})
Here $(this) is just one select element, so your loop will be executed only once anyways. The main problem is this $('.clientAmt').val(...) Here you are selecting all the input elements with the class clientAmt, The selector returns you array of elements, And when you set any attribute on this array of elements it will be applied only for the first element in the array. Hence it always applies to your first input. You have to select the appropriate input and assign the value to only this one.
Solution :
So you have two options to resolve this
1) Using parent().next() : use parent() on the select tag which will give you the td of this select tag and then do next on this td which will take you to the next td that has the input in it. Now set the value of this input
$('.clientType').change(function() {
$(this).parent().next().find('.clientAmt').val($('option:selected', this).data('price'));
});
2) Using closest('tr').find('.clientAmt'): use closest() to find the closest tr which wraps this entire row, that is the tr which wraps this td and other td which holds the input. Now from this tr find the input with class clientAmt with in it
$('.clientType').change(function() {
$(this).closest('tr').find('.clientAmt').val($('option:selected', this).data('price'));
});

$(document).on('change', 'select', function () {
let next_select = $(this);
// console.log(next_select.toArray())
if (!next_select.parent().parent().next().find('select').length) {
next_select.parent().parent().parent().next().find('input[type="text"]').click()
console.log(next_select.parent().parent().parent().next());
} else if (next_select.parent().parent().next().find('select').prop("disabled")) {
setTimeout(function () {
next_select.parent().parent().next().find('select').select2('open')
}, 1000)
console.log('b');
} else if (next_select.parent().parent().next().find('select').length) {
next_select.parent().parent().next().find('select').select2('open')
console.log('c');
}
});

Hide cells depending on select value - generated HTML

I have a problem writing a function to hide two cells depending on the selected value.
The biggest problem is that the HTML is generated and there can be one such select or eight of them. And to make things more interesting, every one of this select is placed in a separate div and while one is shown, others are hidden.
Here is the function I use to toggle cells. Cells can be shown only if selected value is 'Z', otherwise they must be hidden. It works only on the first select while other are completely ignored. I was trying to use .each() function for every element with id="selector" but there was quite a mass with element indexes and it didn't work either.
$("#selector").change(function(){
if($(this).val().trim() == 'Z'){
$("#labelToHide").toggle(true);
$("#selectToHide").toggle(true);
} else {
$("#labelToHide").toggle(false);
$("#selectToHide").toggle(false);
}
});
Here is the working JSFiddle. It might look incomplete, but it is enough to simulate real situation. Bellow is the XML code I work with from which the HTML is generated.
<xh:td class="RightColumn" id="selectToHide">
<form:selectOne ...>
<!-- form code -->
</form:selectOne>
</xh:td>
Is there some way I can make this script work only for currently shown div? Or is there some other workaround?

With the multiple use of IDs it was never going to work as you were doing it. In the following I've changed all the IDs to relevant classes and modified the script to take that into account...
HTML
<div id="divOne">
<table class="gridtable">
<tr>
<td id="allwaysShown">Allways Shown</td>
<td id="allwaysShown">
<select class="selector">
<option value="Z">Z</option>
<option value="X">X</option>
</select>
</td>
<td class="toHide">Hide this</td>
<td class="toHide">
<select>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</td>
</tr>
</table>
</div>
<div id="divTwo">
<table class="gridtable">
<tr>
<td id="allwaysShown">Allways Shown</td>
<td id="allwaysShown">
<select class="selector">
<option value="Z">Z</option>
<option value="X">X</option>
</select>
</td>
<td class="toHide">Hide this</td>
<td class="toHide">
<select>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</td>
</tr>
</table>
</div>
Javascript
$(".selector").change(function () {
if ($(this).val().trim() == 'Z') {
$(this).closest("tr").find(".toHide").show();
} else {
$(this).closest("tr").find(".toHide").hide();
}
});
What this now does is when a select element (with the class selector) changes, it parses up the DOM to find the row that it is contained in, and then finds all the elements with the class toHide, and either hides or shows them.
Your jsfiddle, modified...

Once you fix the issue with multiple id by changing them to class, you can use the following :
$(".selector").change(function () {
if ($(this).val().trim() == 'Z') {
$(this).parent().nextAll("td").show();
} else {
$(this).parent().nextAll("td").hide();
}
});
$(".selectToHide select").change(function () {
if ($(this).val().trim() == 'Y') {
$(this).parent('td').prev().show();
} else {
$(this).parent('td').prev().hide();
}
});
Updated fiddle

You must use unique ids, use classes instead of ids to group the elements. Instead of toggle use show / hide and assign common class to both select and label e.g. toShowHide and use single call to show hide both. I have changed the html attributes just to demonstrate you should change according to your requirement by keeping in mind that ids must be unique.
Live Demo
$(".selector").change(function () {
if ($(this).val().trim() == 'Z')
$(this).parent().siblings(".toShowHide").show();
else
$(this).parent().siblings(".toShowHide").hide();
});

In HTML id's are all unique, that means on a single page of HTML there can only be one id with the same name, if you have used #selector before, you shouldn't use it again (it won't work in the first place.)
Always use a class for this.
Here's your working code as you needed it
<div id="divOne">
<table class="gridtable">
<tr>
<td class="allwaysShown">Allways Shown</td>
<td class="allwaysShown">
<select class="selector">
<option value="Z">Z</option>
<option value="X">X</option>
</select>
</td>
<td class="hide_this">Hide this</td>
<td class="hide_this">
<select>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</td>
</tr>
</table>
</div>
<div id="divTwo">
<table class="gridtable">
<tr>
<td class="allwaysShown">Allways Shown</td>
<td class="allwaysShown">
<select class="selector">
<option value="Z">Z</option>
<option value="X">X</option>
</select>
</td>
<td class="hide_this">Hide this</td>
<td class="hide_this">
<select>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</td>
</tr>
</table>
</div>
JQuery
$(".selector").change(function () {
if ($(this).val().trim() == 'Z') {
$(this).closest('tr').find('.hide_this').show();
} else {
$(this).closest('tr').find('.hide_this').hide();
}
});

Javascript selected index onchange doesn't work at all

I am trying to create a select tag that holds values in it and if two out of the five values are selected another select box will show on the screen. I have tried searching for this and found where people are using javascript and using the onchange event but for some reason I cannot get it to work. The toggle id is the one I want to show up if individual or short term is selected if not I want it to be hidden. The code is below and thanks for your help in advance. I didn't include the javascript because I deleted it all but I have tried it a few different ways with no luck. I am thinking it is the way I have the form laid out.
HTML
<tr>
<td class='txt'><span>*</span>Coverage Needed?</td>
<td>
<select name="ins_type" id='ins_options' onChange="toggle();">
<option>Select...</option>
<option value="Group">Group Insurance</option>
<option value="Individual">Individual Insurance</option>
<option value="Short Term">Short Term Insurance</option>
<option value="Medicare">Medicare</option>
<option value="Life">Life Insurance</option>
</select>
</td>
<td ><div id='toggle'><span>*</span>How Many?
<select name='applicants' id='applicants' >
<option>Select...</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='1'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>
</div>
</td>
</tr>
Javascript (I was thinking something like this should work)
<script type="text/javascript">
function toggle() {
if (document.getElementById("ins_options").options
[getElementById("ins_options").selectedIndex].value == "Individual") {
document.getElementById("toggle").style.display = "none";
} else {
document.getElementById("toggle").style.display = "block";
}
}
</script>

You're missing document in your selected index lookup - http://jsfiddle.net/VfEyW/
So instead of
[getElementById("ins_options").selectedIndex]
try
[document.getElementById("ins_options").selectedIndex]
...
UPDATE
To check against 2 values you can do this
function toggle() {
var val = document.getElementById("ins_options").options[document.getElementById("ins_options").selectedIndex].value;
if ( val == "Individual" || val == "Short Term" ) {
document.getElementById("toggle").style.display = "none";
} else {
document.getElementById("toggle").style.display = "block";
}
}