如何使用 jQuery 附加數組？

Question

我有兩個選擇框。

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

當我選擇值一時，它將使用 List 數組附加選項列表

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

它加載選項列表，如

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

但它必須是

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

我怎樣才能解決這個問題 ？

Answer 1

一種簡潔的方法是使用map()從您可以附加的數組中構建一個option元素的 HTML 字符串：

 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

您可能需要for或forEach循環：

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