如何使用 jQuery 附加数组？

Question

I have two select box.

<select id="select-1"><option value="one">one</option><option value="two">two</option></select>
<select id="select-2"></select>

When I select value one it will append option list using List array

<script type='text/javascript'>
jQuery(document).ready(function($) {
  $('#select-1').on('change', function() {
    var List = ["test 1", "test 2", "test 3", "test 4"];
    var selectedVal = $(this).children("option:selected").val();
    if(selectedVal == "one") {
      $('#select-2').append('<option>' +  List + '</option>');
    }  else {
     //
    }
  })
});
</script>

It load option list like

<option>test 1 test 2 test 3 test 4</option> 

but it must be

<option>test 1</option><option>test 2</option><option>test 3</option><option>test 4</option>

how can I fix this ?

Answer 1

One way to do this succinctly would be to use map() to build a HTML string of option elements from the array which you can append:

 jQuery($ => { $('#select-1').on('change', function() { let list = ["test 1", "test 2", "test 3", "test 4"]; if ($(this).val() === "one") { let options = list.map(t => `<option>${t}</option>`).join(''); $('#select-2').append(options); } else { $('#select-2').empty(); } }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="select-1"> <option value="">Select...</option> <option value="one">one</option> <option value="two">two</option> </select> <select id="select-2"></select>

Answer 2

You probably want a for or a forEach loop:

if (selectedVal == "one") {
    List.forEach(item => {
        $('#select-2').append('<option>' +  item + '</option>');
    }
}