如何向新的附加选择选项显示选择选项

Question

I have a main select options which if the value is equal to the function the result of function will display on the sub select options. But when I append new sub select options the result wont display on the new options.

<select id="system-select-1" class="form-control" data-id="1">
 <option selected>Select</option>
 <option value="test1">test1</option>
 <option value="test2">test2</option>
 <option value="test3">test3</option>
</select>

<select id="sdo-select-1" data-id="1" class="form-control sdo-select">
 <option selected>Select</option>
</select>

heres the whole code

Answer 1

It does not show anything because you just append a sub element without filling its options. (if i got what you mean) You need to check what main-option is selected and then fill the sub-options either before appending or just after having appended your select.

I suggest to put these steps in separate functions, as to call them whenever you need them. for example when you click on "add" you trigger the function to add your sub-select and after that you trigger the function to fill its options. (this, obviously, is just one way to do it...)

Answer 2

You can do several things to populate the newly added sub-selects. The fastest would be to trigger the .change() event on the master select like this:

$(document).on('click', '#add_sdo', function(){
   i++;
   $('#dynamic_sdo').append('<div class="pr-1 salesforce_sdo"><select id="sdo-select-'+i+'" data-id="1" class="form-control sdo-select"><option selected>Select</option></select></div>');    

   $("#system-select-1").change();
});

Here is the updated JsFiddle Code