Alter options on dynamically added drop down menu based on other selections
Question
Ahoy!
Any help on this would be really appreciated stackers! Ok so, I have a drop down menu with 3 lists where I need the selections from each list to alter the options on the next. I have been successful and making the three lists list auto populate from the first selection in (dropdown 1) but not when I select the 2nd option in the first list to auto populate the third list. What syntax can I use to make the third list options change from a selection in the first list? I havent included all the options for the Flange/Groove list because there is just too much. Apologies for my noobness
Heres my HTML:
</div>
<div class ="valvetype">
<select class="form-control"id='firstList' name='firstList' onClick="getValveSize()">
<option>Type</option>
</select>
<select class="form-control" id='secondList' name='secondList' onClick="getTurns()">
<option>DN</option>
</select>
<select class="form-control"id='thirdList' name='thirdList' >
<option>Turns</option>
</select>
<button onclick="findInArray()"class= "submit">Submit</button>
and some js:
$(document).ready(function () {
var list1 = document.getElementById('firstList');
list1.options[0] = new Option('Valve Type', '');
list1.options[1] = new Option('Thread/Solder', 'Thread/Solder');
list1.options[2] = new Option('Flange/Groove', 'Flange/Groove');
});
function getValveSize(){
var list1 = document.getElementById('firstList');
var list2 = document.getElementById("secondList");
var list1SelectedValue = list1.options[list1.selectedIndex].value;
if (list1SelectedValue==='Thread/Solder')
{
list2.options.length=0;
list2.options[0] = new Option('DN', '');
list2.options[1] = new Option('10', '10');
list2.options[2] = new Option('15', '15');
list2.options[3] = new Option('20', '20');
list2.options[4] = new Option('25', '25');
list2.options[5] = new Option('32', '32');
list2.options[6] = new Option('40', '40');
list2.options[7] = new Option('50', '50');
list2.options[8] = new Option('65', '65');
}
else if (list1SelectedValue==='Flange/Groove')
{
list2.options.length=0;
list2.options[0] = new Option('DN', '');
list2.options[1] = new Option('20', '20');
list2.options[2] = new Option('25', '25');
list2.options[3] = new Option('32', '32');
list2.options[4] = new Option('40', '40');
list2.options[5] = new Option('50', '50');
list2.options[6] = new Option('65', '65');
list2.options[7] = new Option('80', '80');
list2.options[8] = new Option('100', '100');
list2.options[9] = new Option('125', '125');
list2.options[10] = new Option('150', '150');
list2.options[11] = new Option('200', '200');
list2.options[12] = new Option('250', '250');
list2.options[13] = new Option('300', '300');
list2.options[14] = new Option('350', '350');
list2.options[15] = new Option('400', '400');
}
}
function getTurns(){
var list1 = document.getElementById('firstList');
var list2 = document.getElementById('secondList');
var list3 = document.getElementById('thirdList');
var list1SelectedValue = list1.options[list1.selectedIndex].value;
var list2SelectedValue = list2.options[list2.selectedIndex].value;
if ($.inArray(list2SelectedValue, ['10', '15', '20', '25']) >= 0)
{
list3.options.length=0;
list3.options[0] = new Option('Turns', '');
list3.options[1] = new Option('0.25', '0.25');
list3.options[2] = new Option('0.5', '0.5');
list3.options[3] = new Option('0.75', '0.75');
list3.options[4] = new Option('1', '1');
list3.options[5] = new Option('1.1', '1.1');
list3.options[6] = new Option('1.2', '1.2');
list3.options[7] = new Option('1.3', '1.3');
list3.options[8] = new Option('1.4', '1.4');
list3.options[9] = new Option('1.5', '1.5');
list3.options[10] = new Option('1.6', '1.6');
list3.options[11] = new Option('1.7', '1.7');
list3.options[12] = new Option('1.8', '1.8');
list3.options[13] = new Option('1.9', '1.9');
list3.options[14] = new Option('2', '2');
list3.options[15] = new Option('2.1', '2.1');
list3.options[16] = new Option('2.2', '2.2');
list3.options[17] = new Option('2.3', '2.3');
list3.options[18] = new Option('2.4', '2.4');
list3.options[19] = new Option('2.5', '2.5');
list3.options[20] = new Option('2.6', '2.6');
list3.options[21] = new Option('2.7', '2.7');
list3.options[22] = new Option('2.8', '2.8');
list3.options[23] = new Option('2.9', '2.9');
list3.options[24] = new Option('3', '3');
list3.options[25] = new Option('3.1', '3.1');
list3.options[26] = new Option('3.2', '3.2');
list3.options[27] = new Option('3.3', '3.3');
list3.options[28] = new Option('3.4', '3.4');
list3.options[29] = new Option('3.5', '3.5');
list3.options[30] = new Option('3.6', '3.6');
list3.options[31] = new Option('3.7', '3.7');
list3.options[32] = new Option('3.8', '3.8');
list3.options[33] = new Option('3.9', '3.9');
list3.options[34] = new Option('4', '4');
list3.options[35] = new Option('4.1', '4.1');
list3.options[36] = new Option('4.2', '4.2');
list3.options[37] = new Option('4.3', '4.3');
list3.options[38] = new Option('4.4', '4.4');
list3.options[39] = new Option('4.5', '4.5');
list3.options[40] = new Option("4.6", "4.6");
list3.options[41] = new Option("4.7", "4.7");
list3.options[42] = new Option("4.8", "4.8");
list3.options[43] = new Option("4.9", "4.9");
list3.options[44] = new Option("5", "5");
list3.options[45] = new Option("5.1", "5.1");
list3.options[46] = new Option("5.2", "5.2");
list3.options[47] = new Option("5.3", "5.3");
list3.options[48] = new Option("5.4", "5.4");
list3.options[49] = new Option("5.5", "5.5");
list3.options[50] = new Option("5.6", "5.6");
list3.options[51] = new Option("5.7", "5.7");
list3.options[52] = new Option("5.8", "5.8");
list3.options[53] = new Option("5.9", "5.9");
list3.options[54] = new Option("6", "6");
list3.options[55] = new Option("6.1", "6.1");
list3.options[56] = new Option("6.2", "6.2");
list3.options[57] = new Option("6.3", "6.3");
list3.options[58] = new Option("6.4", "6.4");
list3.options[59] = new Option("6.5", "6.5");
list3.options[60] = new Option("6.6", "6.6");
list3.options[61] = new Option("6.7", "6.7");
list3.options[62] = new Option("6.8", "6.8");
list3.options[63] = new Option("6.9", "6.9");
list3.options[64] = new Option("7", "7");
}
else if ($.inArray(list2SelectedValue, ['32', '40', '50']) >= 0) {
list3.options.length=0;
list3.options[0] = new Option('Turns', '');
list3.options[1] = new Option('0.25', '0.25');
list3.options[2] = new Option('0.5', '0.5');
list3.options[3] = new Option('0.75', '0.75');
list3.options[4] = new Option('1', '1');
list3.options[5] = new Option('1.1', '1.1');
list3.options[6] = new Option('1.2', '1.2');
list3.options[7] = new Option('1.3', '1.3');
list3.options[8] = new Option('1.4', '1.4');
list3.options[9] = new Option('1.5', '1.5');
list3.options[10] = new Option('1.6', '1.6');
list3.options[11] = new Option('1.7', '1.7');
list3.options[12] = new Option('1.8', '1.8');
list3.options[13] = new Option('1.9', '1.9');
list3.options[14] = new Option('2', '2');
list3.options[15] = new Option('2.1', '2.1');
list3.options[16] = new Option('2.2', '2.2');
list3.options[17] = new Option('2.3', '2.3');
list3.options[18] = new Option('2.4', '2.4');
list3.options[19] = new Option('2.5', '2.5');
list3.options[20] = new Option('2.6', '2.6');
list3.options[21] = new Option('2.7', '2.7');
list3.options[22] = new Option('2.8', '2.8');
list3.options[23] = new Option('2.9', '2.9');
list3.options[24] = new Option('3', '3');
list3.options[25] = new Option('3.1', '3.1');
list3.options[26] = new Option('3.2', '3.2');
list3.options[27] = new Option('3.3', '3.3');
list3.options[28] = new Option('3.4', '3.4');
list3.options[29] = new Option('3.5', '3.5');
list3.options[30] = new Option('3.6', '3.6');
list3.options[31] = new Option('3.7', '3.7');
list3.options[32] = new Option('3.8', '3.8');
list3.options[33] = new Option('3.9', '3.9');
list3.options[34] = new Option('4', '4');
list3.options[35] = new Option('4.1', '4.1');
list3.options[36] = new Option('4.2', '4.2');
list3.options[37] = new Option('4.3', '4.3');
list3.options[38] = new Option('4.4', '4.4');
list3.options[39] = new Option('4.5', '4.5');
list3.options[40] = new Option('4.6', '4.6');
list3.options[41] = new Option('4.7', '4.7');
list3.options[42] = new Option('4.8', '4.8');
list3.options[43] = new Option('4.9', '4.9');
list3.options[44] = new Option('5', '5');
list3.options[45] = new Option('5.1', '5.1');
list3.options[46] = new Option('5.2', '5.2');
list3.options[47] = new Option('5.3', '5.3');
list3.options[48] = new Option('5.4', '5.4');
list3.options[49] = new Option('5.5', '5.5');
list3.options[50] = new Option('5.6', '5.6');
list3.options[51] = new Option('5.7', '5.7');
list3.options[52] = new Option('5.8', '5.8');
list3.options[53] = new Option('5.9', '5.9');
list3.options[54] = new Option('6', '6');
list3.options[55] = new Option('6.1', '6.1');
list3.options[56] = new Option('6.2', '6.2');
list3.options[57] = new Option('6.3', '6.3');
list3.options[58] = new Option('6.4', '6.4');
list3.options[59] = new Option('6.5', '6.5');
list3.options[60] = new Option('6.6', '6.6');
list3.options[61] = new Option('6.7', '6.7');
list3.options[62] = new Option('6.8', '6.8');
list3.options[63] = new Option('6.9', '6.9');
list3.options[64] = new Option('7', '7');
list3.options[65] = new Option('7.1', '7.1');
list3.options[66] = new Option('7.2', '7.2');
list3.options[67] = new Option('7.3', '7.3');
list3.options[68] = new Option('7.4', '7.4');
list3.options[69] = new Option('7.5', '7.5');
list3.options[70] = new Option('7.6', '7.6');
list3.options[71] = new Option('7.7', '7.7');
list3.options[72] = new Option('7.8', '7.8');
list3.options[73] = new Option('7.9', '7.9');
list3.options[74] = new Option('8', '8');
list3.options[75] = new Option('8.1', '8.1');
list3.options[76] = new Option('8.2', '8.2');
list3.options[77] = new Option('8.3', '8.3');
list3.options[78] = new Option('8.4', '8.4');
list3.options[79] = new Option('8.5', '8.5');
list3.options[80] = new Option('8.6', '8.6');
list3.options[81] = new Option('8.7', '8.7');
list3.options[82] = new Option('8.8', '8.8');
list3.options[83] = new Option('8.9', '8.9');
list3.options[84] = new Option('9', '9');
list3.options[85] = new Option('9.1','9.1');
list3.options[86] = new Option('9.2', '9.2');
list3.options[87] = new Option('9.3', '9.3');
list3.options[88] = new Option('9.4', '9.4');
list3.options[89] = new Option('9.5', '9.5');
list3.options[90] = new Option('9.6', '9.6');
list3.options[91] = new Option('9.7', '9.7');
list3.options[92] = new Option('9.8', '9.8');
list3.options[93] = new Option('9.9', '9.9');
list3.options[94] = new Option('10', '10');
}
else if
($.inArray(list2SelectedValue, ['65']) >= 0) {
list3.options.length=0;
list3.options[0] = new Option('1', '1');
list3.options[1] = new Option('1.1', '1.1');
list3.options[2] = new Option('1.2', '1.2');
list3.options[3] = new Option('1.3', '1.3');
list3.options[4] = new Option('1.4', '1.4');
list3.options[5] = new Option('1.5', '1.5');
list3.options[6] = new Option('1.6', '1.6');
list3.options[7] = new Option('1.7', '1.7');
list3.options[8] = new Option('1.8', '1.8');
list3.options[9] = new Option('1.9', '1.9');
list3.options[10] = new Option('2', '2');
list3.options[11] = new Option('2.1', '2.1');
list3.options[12] = new Option('2.2', '2.2');
list3.options[13] = new Option('2.3', '2.3');
list3.options[14] = new Option('2.4', '2.4');
list3.options[15] = new Option('2.5', '2.5');
list3.options[16] = new Option('2.6', '2.6');
list3.options[17] = new Option('2.7', '2.7');
list3.options[18] = new Option('2.8', '2.8');
list3.options[19] = new Option('2.9', '2.9');
list3.options[20] = new Option('3', '3');
list3.options[21] = new Option('3.1', '3.1');
list3.options[22] = new Option('3.2', '3.2');
list3.options[23] = new Option('3.3', '3.3');
list3.options[24] = new Option('3.4', '3.4');
list3.options[25] = new Option('3.5', '3.5');
list3.options[26] = new Option('3.6', '3.6');
list3.options[27] = new Option('3.7', '3.7');
list3.options[28] = new Option('3.8', '3.8');
list3.options[29] = new Option('3.9', '3.9');
list3.options[30] = new Option('4', '4');
list3.options[31] = new Option('4.1', '4.1');
list3.options[32] = new Option('4.2', '4.2');
list3.options[33] = new Option('4.3', '4.3');
list3.options[34] = new Option('4.4', '4.4');
list3.options[35] = new Option('4.5', '4.5');
list3.options[36] = new Option('4.6', '4.6');
list3.options[37] = new Option('4.7', '4.7');
list3.options[38] = new Option('4.8', '4.8');
list3.options[39] = new Option('4.9', '4.9');
list3.options[40] = new Option('5', '5');
list3.options[41] = new Option('5.1', '5.1');
list3.options[42] = new Option('5.2', '5.2');
list3.options[43] = new Option('5.3', '5.3');
list3.options[44] = new Option('5.4', '5.4');
list3.options[45] = new Option('5.5', '5.5');
list3.options[46] = new Option('5.6', '5.6');
list3.options[47] = new Option('5.7', '5.7');
list3.options[48] = new Option('5.8', '5.8');
list3.options[49] = new Option('5.9', '5.9');
list3.options[50] = new Option('6', '6');
list3.options[51] = new Option('6.1', '6.1');
list3.options[52] = new Option('6.2', '6.2');
list3.options[53] = new Option('6.3', '6.3');
list3.options[54] = new Option('6.4', '6.4');
list3.options[55] = new Option('6.5', '6.5');
list3.options[56] = new Option('6.6', '6.6');
list3.options[57] = new Option('6.7', '6.7');
list3.options[58] = new Option('6.8', '6.8');
list3.options[59] = new Option('6.9', '6.9');
list3.options[60] = new Option('7', '7');
list3.options[61] = new Option('7.1', '7.1');
list3.options[62] = new Option('7.2', '7.2');
list3.options[63] = new Option('7.3', '7.3');
list3.options[64] = new Option('7.4', '7.4');
list3.options[65] = new Option('7.5', '7.5');
list3.options[66] = new Option('7.6', '7.6');
list3.options[67] = new Option('7.7', '7.7');
list3.options[68] = new Option('7.8', '7.8');
list3.options[69] = new Option('7.9', '7.9');
list3.options[70] = new Option('8', '8');
list3.options[71] = new Option('8.1', '8.1');
list3.options[72] = new Option('8.2', '8.2');
list3.options[73] = new Option('8.3', '8.3');
list3.options[74] = new Option('8.4', '8.4');
list3.options[75] = new Option('8.5', '8.5');
list3.options[76] = new Option('8.6', '8.6');
list3.options[77] = new Option('8.7', '8.7');
list3.options[78] = new Option('8.8', '8.8');
list3.options[79] = new Option('8.9', '8.9');
list3.options[80] = new Option('9', '9');
list3.options[81] = new Option('9.1','9.1');
list3.options[82] = new Option('9.2', '9.2');
list3.options[83] = new Option('9.3', '9.3');
list3.options[84] = new Option('9.4', '9.4');
list3.options[85] = new Option('9.5', '9.5');
list3.options[86] = new Option('9.6', '9.6');
list3.options[87] = new Option('9.7', '9.7');
list3.options[88] = new Option('9.8', '9.8');
list3.options[89] = new Option('9.9', '9.9');
list3.options[90] = new Option('10', '10');
list3.options[91] = new Option('10.1', '10.1');
list3.options[92] = new Option('10.2', '10.2');
list3.options[93] = new Option('10.3', '10.3');
list3.options[94] = new Option('10.4', '10.4');
list3.options[95] = new Option('10.5', '10.5');
list3.options[96] = new Option('10.6', '10.6');
list3.options[97] = new Option('10.7', '10.7');
list3.options[98] = new Option('10.8', '10.8');
list3.options[99] = new Option('10.9', '10.9');
list3.options[100] = new Option('11', '11');
list3.options[101] = new Option('11.1', '11.1');
list3.options[102] = new Option('11.2', '11.2');
list3.options[103] = new Option('11.3', '11.3');
list3.options[104] = new Option('11.4', '11.4');
list3.options[105] = new Option('11.5', '11.5');
list3.options[106] = new Option('11.6', '11.6');
list3.options[107] = new Option('11.7', '11.7');
list3.options[108] = new Option('11.8', '11.8');
list3.options[109] = new Option('11.9', '11.9');
list3.options[110] = new Option('12', '12');
}
else if
(list1SelectedValue.is('Flange/Groove') && list2SelectedValue.is('20', '25'))
{
list3.options.length=0;
list3.options[0] = new Option('1', '1');
list3.options[1] = new Option('1.1', '1.1');
list3.options[2] = new Option('1.2', '1.2');
list3.options[3] = new Option('1.3', '1.3');
list3.options[4] = new Option('1.4', '1.4');
list3.options[5] = new Option('1.5', '1.5');
list3.options[6] = new Option('1.6', '1.6');
list3.options[7] = new Option('1.7', '1.7');
list3.options[8] = new Option('1.8', '1.8');
list3.options[8] = new Option('1.9', '1.9');
list3.options[9] = new Option('2', '2');
list3.options[10] = new Option('2.1', '2.1');
list3.options[11] = new Option('2.2', '2.2');
list3.options[12] = new Option('2.3', '2.3');
list3.options[13] = new Option('2.4', '2.4');
list3.options[14] = new Option('2.5', '2.5');
list3.options[15] = new Option('2.6', '2.6');
list3.options[16] = new Option('2.7', '2.7');
list3.options[17] = new Option('2.8', '2.8');
list3.options[18] = new Option('2.9', '2.9');
list3.options[19] = new Option('3', '3');
list3.options[20] = new Option('3.1', '3.1');
list3.options[21] = new Option('3.2', '3.2');
list3.options[22] = new Option('3.3', '3.3');
list3.options[23] = new Option('3.4', '3.4');
list3.options[24] = new Option('3.5', '3.5');
list3.options[25] = new Option('3.6', '3.6');
list3.options[26] = new Option('3.7', '3.7');
list3.options[27] = new Option('3.8', '3.8');
list3.options[28] = new Option('3.9', '3.9');
list3.options[29] = new Option('4', '4');
list3.options[30] = new Option('4.1', '4.1');
list3.options[31] = new Option('4.2', '4.2');
list3.options[32] = new Option('4.3', '4.3');
list3.options[33] = new Option('4.4', '4.4');
list3.options[34] = new Option('4.5', '4.5');
list3.options[35] = new Option('4.6', '4.6');
list3.options[36] = new Option('4.7', '4.7');
list3.options[37] = new Option('4.8', '4.8');
list3.options[38] = new Option('4.9', '4.9');
list3.options[39] = new Option('5', '5');
list3.options[40] = new Option('5.1', '5.1');
list3.options[41] = new Option('5.2', '5.2');
list3.options[42] = new Option('5.3', '5.3');
list3.options[43] = new Option('5.4', '5.4');
list3.options[44] = new Option('5.5', '5.5');
list3.options[45] = new Option('5.6', '5.6');
list3.options[46] = new Option('5.7', '5.7');
list3.options[47] = new Option('5.8', '5.8');
list3.options[48] = new Option('5.9', '5.9');
list3.options[49] = new Option('6', '6');
list3.options[50] = new Option('6.1', '6.1');
list3.options[51] = new Option('6.2', '6.2');
list3.options[52] = new Option('6.3', '6.3');
list3.options[53] = new Option('6.4', '6.4');
list3.options[54] = new Option('6.5', '6.5');
list3.options[55] = new Option('6.6', '6.6');
list3.options[56] = new Option('6.7', '6.7');
list3.options[57] = new Option('6.8', '6.8');
list3.options[58] = new Option('6.9', '6.9');
list3.options[59] = new Option('7', '7');
}
$('#thirdList').append(list3);
}
1 answers
solution1
1 ACCPTED 2020-09-18 09:01:06
Your logic was a bit incorrect previously - The tricky part is that you are checking for flang and 20,25 but the else if is at placed at the end which was never hitting that point.
The threaded option with '10', '15', '20', '25' was placed at first if so that was always becoming true regardless since the condition was matching
Also, you need to use an onchange function NOT an onclick function in your HTML as well. onchange function is used for changing selection or checkboxes .
Live Working Demo: (All working as required)
$(document).ready(function() { var list1 = document.getElementById('firstList'); list1.options[1] = new Option('Thread/Solder', 'Thread/Solder'); list1.options[2] = new Option('Flange/Groove', 'Flange/Groove'); }); function getValveSize() { var list1 = document.getElementById('firstList'); var list2 = document.getElementById("secondList"); var list1SelectedValue = list1.options[list1.selectedIndex].value; if (list1SelectedValue === 'Thread/Solder') { list2.options.length = 0; list2.options[0] = new Option('DN', ''); list2.options[1] = new Option('10', '10'); list2.options[2] = new Option('15', '15'); list2.options[3] = new Option('20', '20'); list2.options[4] = new Option('25', '25'); list2.options[5] = new Option('32', '32'); list2.options[6] = new Option('40', '40'); list2.options[7] = new Option('50', '50'); list2.options[8] = new Option('65', '65'); } else if (list1SelectedValue === 'Flange/Groove') { list2.options.length = 0; list2.options[0] = new Option('DN', ''); list2.options[1] = new Option('20', '20'); list2.options[2] = new Option('25', '25'); list2.options[3] = new Option('32', '32'); list2.options[4] = new Option('40', '40'); list2.options[5] = new Option('50', '50'); list2.options[6] = new Option('65', '65'); list2.options[7] = new Option('80', '80'); list2.options[8] = new Option('100', '100'); list2.options[9] = new Option('125', '125'); list2.options[10] = new Option('150', '150'); list2.options[11] = new Option('200', '200'); list2.options[12] = new Option('250', '250'); list2.options[13] = new Option('300', '300'); list2.options[14] = new Option('350', '350'); list2.options[15] = new Option('400', '400'); } } function getTurns() { var list1 = document.getElementById('firstList'); var list2 = document.getElementById('secondList'); var list3 = document.getElementById('thirdList'); var list1SelectedValue = list1.options[list1.selectedIndex].value; var list2SelectedValue = list2.options[list2.selectedIndex].value; if (list1SelectedValue == 'Flange/Groove' && $.inArray(list2SelectedValue, ['20', '25']) >= 0) { list3.options.length = 0; list3.options[0] = new Option('1', '1'); list3.options[1] = new Option('1.1', '1.1'); list3.options[2] = new Option('1.2', '1.2'); list3.options[3] = new Option('1.3', '1.3'); list3.options[4] = new Option('1.4', '1.4'); list3.options[5] = new Option('1.5', '1.5'); list3.options[6] = new Option('1.6', '1.6'); list3.options[7] = new Option('1.7', '1.7'); list3.options[8] = new Option('1.8', '1.8'); list3.options[8] = new Option('1.9', '1.9'); list3.options[9] = new Option('2', '2'); list3.options[10] = new Option('2.1', '2.1'); list3.options[11] = new Option('2.2', '2.2'); list3.options[12] = new Option('2.3', '2.3'); list3.options[13] = new Option('2.4', '2.4'); list3.options[14] = new Option('2.5', '2.5'); list3.options[15] = new Option('2.6', '2.6'); list3.options[16] = new Option('2.7', '2.7'); list3.options[17] = new Option('2.8', '2.8'); list3.options[18] = new Option('2.9', '2.9'); list3.options[19] = new Option('3', '3'); list3.options[20] = new Option('3.1', '3.1'); list3.options[21] = new Option('3.2', '3.2'); list3.options[22] = new Option('3.3', '3.3'); list3.options[23] = new Option('3.4', '3.4'); list3.options[24] = new Option('3.5', '3.5'); list3.options[25] = new Option('3.6', '3.6'); list3.options[26] = new Option('3.7', '3.7'); list3.options[27] = new Option('3.8', '3.8'); list3.options[28] = new Option('3.9', '3.9'); list3.options[29] = new Option('4', '4'); list3.options[30] = new Option('4.1', '4.1'); list3.options[31] = new Option('4.2', '4.2'); list3.options[32] = new Option('4.3', '4.3'); list3.options[33] = new Option('4.4', '4.4'); list3.options[34] = new Option('4.5', '4.5'); list3.options[35] = new Option('4.6', '4.6'); list3.options[36] = new Option('4.7', '4.7'); list3.options[37] = new Option('4.8', '4.8'); list3.options[38] = new Option('4.9', '4.9'); list3.options[39] = new Option('5', '5'); list3.options[40] = new Option('5.1', '5.1'); list3.options[41] = new Option('5.2', '5.2'); list3.options[42] = new Option('5.3', '5.3'); list3.options[43] = new Option('5.4', '5.4'); list3.options[44] = new Option('5.5', '5.5'); list3.options[45] = new Option('5.6', '5.6'); list3.options[46] = new Option('5.7', '5.7'); list3.options[47] = new Option('5.8', '5.8'); list3.options[48] = new Option('5.9', '5.9'); list3.options[49] = new Option('6', '6'); list3.options[50] = new Option('6.1', '6.1'); list3.options[51] = new Option('6.2', '6.2'); list3.options[52] = new Option('6.3', '6.3'); list3.options[53] = new Option('6.4', '6.4'); list3.options[54] = new Option('6.5', '6.5'); list3.options[55] = new Option('6.6', '6.6'); list3.options[56] = new Option('6.7', '6.7'); list3.options[57] = new Option('6.8', '6.8'); list3.options[58] = new Option('6.9', '6.9'); list3.options[59] = new Option('7', '7'); } else if ($.inArray(list2SelectedValue, ['32', '40', '50']) >= 0) { list3.options.length = 0; list3.options[0] = new Option('Turns', ''); list3.options[1] = new Option('0.25', '0.25'); list3.options[2] = new Option('0.5', '0.5'); list3.options[3] = new Option('0.75', '0.75'); list3.options[4] = new Option('1', '1'); list3.options[5] = new Option('1.1', '1.1'); list3.options[6] = new Option('1.2', '1.2'); list3.options[7] = new Option('1.3', '1.3'); list3.options[8] = new Option('1.4', '1.4'); list3.options[9] = new Option('1.5', '1.5'); list3.options[10] = new Option('1.6', '1.6'); list3.options[11] = new Option('1.7', '1.7'); list3.options[12] = new Option('1.8', '1.8'); list3.options[13] = new Option('1.9', '1.9'); list3.options[14] = new Option('2', '2'); list3.options[15] = new Option('2.1', '2.1'); list3.options[16] = new Option('2.2', '2.2'); list3.options[17] = new Option('2.3', '2.3'); list3.options[18] = new Option('2.4', '2.4'); list3.options[19] = new Option('2.5', '2.5'); list3.options[20] = new Option('2.6', '2.6'); list3.options[21] = new Option('2.7', '2.7'); list3.options[22] = new Option('2.8', '2.8'); list3.options[23] = new Option('2.9', '2.9'); list3.options[24] = new Option('3', '3'); list3.options[25] = new Option('3.1', '3.1'); list3.options[26] = new Option('3.2', '3.2'); list3.options[27] = new Option('3.3', '3.3'); list3.options[28] = new Option('3.4', '3.4'); list3.options[29] = new Option('3.5', '3.5'); list3.options[30] = new Option('3.6', '3.6'); list3.options[31] = new Option('3.7', '3.7'); list3.options[32] = new Option('3.8', '3.8'); list3.options[33] = new Option('3.9', '3.9'); list3.options[34] = new Option('4', '4'); list3.options[35] = new Option('4.1', '4.1'); list3.options[36] = new Option('4.2', '4.2'); list3.options[37] = new Option('4.3', '4.3'); list3.options[38] = new Option('4.4', '4.4'); list3.options[39] = new Option('4.5', '4.5'); list3.options[40] = new Option('4.6', '4.6'); list3.options[41] = new Option('4.7', '4.7'); list3.options[42] = new Option('4.8', '4.8'); list3.options[43] = new Option('4.9', '4.9'); list3.options[44] = new Option('5', '5'); list3.options[45] = new Option('5.1', '5.1'); list3.options[46] = new Option('5.2', '5.2'); list3.options[47] = new Option('5.3', '5.3'); list3.options[48] = new Option('5.4', '5.4'); list3.options[49] = new Option('5.5', '5.5'); list3.options[50] = new Option('5.6', '5.6'); list3.options[51] = new Option('5.7', '5.7'); list3.options[52] = new Option('5.8', '5.8'); list3.options[53] = new Option('5.9', '5.9'); list3.options[54] = new Option('6', '6'); list3.options[55] = new Option('6.1', '6.1'); list3.options[56] = new Option('6.2', '6.2'); list3.options[57] = new Option('6.3', '6.3'); list3.options[58] = new Option('6.4', '6.4'); list3.options[59] = new Option('6.5', '6.5'); list3.options[60] = new Option('6.6', '6.6'); list3.options[61] = new Option('6.7', '6.7'); list3.options[62] = new Option('6.8', '6.8'); list3.options[63] = new Option('6.9', '6.9'); list3.options[64] = new Option('7', '7'); list3.options[65] = new Option('7.1', '7.1'); list3.options[66] = new Option('7.2', '7.2'); list3.options[67] = new Option('7.3', '7.3'); list3.options[68] = new Option('7.4', '7.4'); list3.options[69] = new Option('7.5', '7.5'); list3.options[70] = new Option('7.6', '7.6'); list3.options[71] = new Option('7.7', '7.7'); list3.options[72] = new Option('7.8', '7.8'); list3.options[73] = new Option('7.9', '7.9'); list3.options[74] = new Option('8', '8'); list3.options[75] = new Option('8.1', '8.1'); list3.options[76] = new Option('8.2', '8.2'); list3.options[77] = new Option('8.3', '8.3'); list3.options[78] = new Option('8.4', '8.4'); list3.options[79] = new Option('8.5', '8.5'); list3.options[80] = new Option('8.6', '8.6'); list3.options[81] = new Option('8.7', '8.7'); list3.options[82] = new Option('8.8', '8.8'); list3.options[83] = new Option('8.9', '8.9'); list3.options[84] = new Option('9', '9'); list3.options[85] = new Option('9.1', '9.1'); list3.options[86] = new Option('9.2', '9.2'); list3.options[87] = new Option('9.3', '9.3'); list3.options[88] = new Option('9.4', '9.4'); list3.options[89] = new Option('9.5', '9.5'); list3.options[90] = new Option('9.6', '9.6'); list3.options[91] = new Option('9.7', '9.7'); list3.options[92] = new Option('9.8', '9.8'); list3.options[93] = new Option('9.9', '9.9'); list3.options[94] = new Option('10', '10'); } else if ($.inArray(list2SelectedValue, ['65']) >= 0) { list3.options.length = 0; list3.options[0] = new Option('1', '1'); list3.options[1] = new Option('1.1', '1.1'); list3.options[2] = new Option('1.2', '1.2'); list3.options[3] = new Option('1.3', '1.3'); list3.options[4] = new Option('1.4', '1.4'); list3.options[5] = new Option('1.5', '1.5'); list3.options[6] = new Option('1.6', '1.6'); list3.options[7] = new Option('1.7', '1.7'); list3.options[8] = new Option('1.8', '1.8'); list3.options[9] = new Option('1.9', '1.9'); list3.options[10] = new Option('2', '2'); list3.options[11] = new Option('2.1', '2.1'); list3.options[12] = new Option('2.2', '2.2'); list3.options[13] = new Option('2.3', '2.3'); list3.options[14] = new Option('2.4', '2.4'); list3.options[15] = new Option('2.5', '2.5'); list3.options[16] = new Option('2.6', '2.6'); list3.options[17] = new Option('2.7', '2.7'); list3.options[18] = new Option('2.8', '2.8'); list3.options[19] = new Option('2.9', '2.9'); list3.options[20] = new Option('3', '3'); list3.options[21] = new Option('3.1', '3.1'); list3.options[22] = new Option('3.2', '3.2'); list3.options[23] = new Option('3.3', '3.3'); list3.options[24] = new Option('3.4', '3.4'); list3.options[25] = new Option('3.5', '3.5'); list3.options[26] = new Option('3.6', '3.6'); list3.options[27] = new Option('3.7', '3.7'); list3.options[28] = new Option('3.8', '3.8'); list3.options[29] = new Option('3.9', '3.9'); list3.options[30] = new Option('4', '4'); list3.options[31] = new Option('4.1', '4.1'); list3.options[32] = new Option('4.2', '4.2'); list3.options[33] = new Option('4.3', '4.3'); list3.options[34] = new Option('4.4', '4.4'); list3.options[35] = new Option('4.5', '4.5'); list3.options[36] = new Option('4.6', '4.6'); list3.options[37] = new Option('4.7', '4.7'); list3.options[38] = new Option('4.8', '4.8'); list3.options[39] = new Option('4.9', '4.9'); list3.options[40] = new Option('5', '5'); list3.options[41] = new Option('5.1', '5.1'); list3.options[42] = new Option('5.2', '5.2'); list3.options[43] = new Option('5.3', '5.3'); list3.options[44] = new Option('5.4', '5.4'); list3.options[45] = new Option('5.5', '5.5'); list3.options[46] = new Option('5.6', '5.6'); list3.options[47] = new Option('5.7', '5.7'); list3.options[48] = new Option('5.8', '5.8'); list3.options[49] = new Option('5.9', '5.9'); list3.options[50] = new Option('6', '6'); list3.options[51] = new Option('6.1', '6.1'); list3.options[52] = new Option('6.2', '6.2'); list3.options[53] = new Option('6.3', '6.3'); list3.options[54] = new Option('6.4', '6.4'); list3.options[55] = new Option('6.5', '6.5'); list3.options[56] = new Option('6.6', '6.6'); list3.options[57] = new Option('6.7', '6.7'); list3.options[58] = new Option('6.8', '6.8'); list3.options[59] = new Option('6.9', '6.9'); list3.options[60] = new Option('7', '7'); list3.options[61] = new Option('7.1', '7.1'); list3.options[62] = new Option('7.2', '7.2'); list3.options[63] = new Option('7.3', '7.3'); list3.options[64] = new Option('7.4', '7.4'); list3.options[65] = new Option('7.5', '7.5'); list3.options[66] = new Option('7.6', '7.6'); list3.options[67] = new Option('7.7', '7.7'); list3.options[68] = new Option('7.8', '7.8'); list3.options[69] = new Option('7.9', '7.9'); list3.options[70] = new Option('8', '8'); list3.options[71] = new Option('8.1', '8.1'); list3.options[72] = new Option('8.2', '8.2'); list3.options[73] = new Option('8.3', '8.3'); list3.options[74] = new Option('8.4', '8.4'); list3.options[75] = new Option('8.5', '8.5'); list3.options[76] = new Option('8.6', '8.6'); list3.options[77] = new Option('8.7', '8.7'); list3.options[78] = new Option('8.8', '8.8'); list3.options[79] = new Option('8.9', '8.9'); list3.options[80] = new Option('9', '9'); list3.options[81] = new Option('9.1', '9.1'); list3.options[82] = new Option('9.2', '9.2'); list3.options[83] = new Option('9.3', '9.3'); list3.options[84] = new Option('9.4', '9.4'); list3.options[85] = new Option('9.5', '9.5'); list3.options[86] = new Option('9.6', '9.6'); list3.options[87] = new Option('9.7', '9.7'); list3.options[88] = new Option('9.8', '9.8'); list3.options[89] = new Option('9.9', '9.9'); list3.options[90] = new Option('10', '10'); list3.options[91] = new Option('10.1', '10.1'); list3.options[92] = new Option('10.2', '10.2'); list3.options[93] = new Option('10.3', '10.3'); list3.options[94] = new Option('10.4', '10.4'); list3.options[95] = new Option('10.5', '10.5'); list3.options[96] = new Option('10.6', '10.6'); list3.options[97] = new Option('10.7', '10.7'); list3.options[98] = new Option('10.8', '10.8'); list3.options[99] = new Option('10.9', '10.9'); list3.options[100] = new Option('11', '11'); list3.options[101] = new Option('11.1', '11.1'); list3.options[102] = new Option('11.2', '11.2'); list3.options[103] = new Option('11.3', '11.3'); list3.options[104] = new Option('11.4', '11.4'); list3.options[105] = new Option('11.5', '11.5'); list3.options[106] = new Option('11.6', '11.6'); list3.options[107] = new Option('11.7', '11.7'); list3.options[108] = new Option('11.8', '11.8'); list3.options[109] = new Option('11.9', '11.9'); list3.options[110] = new Option('12', '12'); } else if ($.inArray(list2SelectedValue, ['10', '15', '20', '25']) >= 0) { list3.options.length = 0; list3.options[0] = new Option('Turns', ''); list3.options[1] = new Option('0.25', '0.25'); list3.options[2] = new Option('0.5', '0.5'); list3.options[3] = new Option('0.75', '0.75'); list3.options[4] = new Option('1', '1'); list3.options[5] = new Option('1.1', '1.1'); list3.options[6] = new Option('1.2', '1.2'); list3.options[7] = new Option('1.3', '1.3'); list3.options[8] = new Option('1.4', '1.4'); list3.options[9] = new Option('1.5', '1.5'); list3.options[10] = new Option('1.6', '1.6'); list3.options[11] = new Option('1.7', '1.7'); list3.options[12] = new Option('1.8', '1.8'); list3.options[13] = new Option('1.9', '1.9'); list3.options[14] = new Option('2', '2'); list3.options[15] = new Option('2.1', '2.1'); list3.options[16] = new Option('2.2', '2.2'); list3.options[17] = new Option('2.3', '2.3'); list3.options[18] = new Option('2.4', '2.4'); list3.options[19] = new Option('2.5', '2.5'); list3.options[20] = new Option('2.6', '2.6'); list3.options[21] = new Option('2.7', '2.7'); list3.options[22] = new Option('2.8', '2.8'); list3.options[23] = new Option('2.9', '2.9'); list3.options[24] = new Option('3', '3'); list3.options[25] = new Option('3.1', '3.1'); list3.options[26] = new Option('3.2', '3.2'); list3.options[27] = new Option('3.3', '3.3'); list3.options[28] = new Option('3.4', '3.4'); list3.options[29] = new Option('3.5', '3.5'); list3.options[30] = new Option('3.6', '3.6'); list3.options[31] = new Option('3.7', '3.7'); list3.options[32] = new Option('3.8', '3.8'); list3.options[33] = new Option('3.9', '3.9'); list3.options[34] = new Option('4', '4'); list3.options[35] = new Option('4.1', '4.1'); list3.options[36] = new Option('4.2', '4.2'); list3.options[37] = new Option('4.3', '4.3'); list3.options[38] = new Option('4.4', '4.4'); list3.options[39] = new Option('4.5', '4.5'); list3.options[40] = new Option("4.6", "4.6"); list3.options[41] = new Option("4.7", "4.7"); list3.options[42] = new Option("4.8", "4.8"); list3.options[43] = new Option("4.9", "4.9"); list3.options[44] = new Option("5", "5"); list3.options[45] = new Option("5.1", "5.1"); list3.options[46] = new Option("5.2", "5.2"); list3.options[47] = new Option("5.3", "5.3"); list3.options[48] = new Option("5.4", "5.4"); list3.options[49] = new Option("5.5", "5.5"); list3.options[50] = new Option("5.6", "5.6"); list3.options[51] = new Option("5.7", "5.7"); list3.options[52] = new Option("5.8", "5.8"); list3.options[53] = new Option("5.9", "5.9"); list3.options[54] = new Option("6", "6"); list3.options[55] = new Option("6.1", "6.1"); list3.options[56] = new Option("6.2", "6.2"); list3.options[57] = new Option("6.3", "6.3"); list3.options[58] = new Option("6.4", "6.4"); list3.options[59] = new Option("6.5", "6.5"); list3.options[60] = new Option("6.6", "6.6"); list3.options[61] = new Option("6.7", "6.7"); list3.options[62] = new Option("6.8", "6.8"); list3.options[63] = new Option("6.9", "6.9"); list3.options[64] = new Option("7", "7"); } $('#thirdList').append(list3); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="valvetype"> <select class="form-control" id='firstList' name='firstList' onchange="getValveSize()"> <option disabled selected>Choose</option> </select> <select class="form-control" id='secondList' name='secondList' onchange="getTurns()"> <option disabled selected>DN</option> </select> <select class="form-control" id='thirdList' name='thirdList'> <option disabled selected>Turns</option> </select> <button onclick="findInArray()" class="submit">Submit</button> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
disable options in drop down based on certain selections javascript
Dynamically replace drop down menu options jQuery
How to do Page Redirection based on two drop down menu selections?
Changing dependent drop down input options on dynamically added rows
Disabling Second Drop Down Menu Options Based on First Drop Down Menu Options
Dynamically Populate one drop down based on selection in other drop down
Show Div based on multiple drop down selections
JQuery changing drop down options based on other option not working
Greying out form options based on other selections
Display Drop Down Menu “dynamically”?
Related Tags