时间戳

首页 > 解决方案 > 如何使用 jQuery 追加数组？

javascript - 如何使用 jQuery 追加数组？

问题描述

我有两个选择框。

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

当我选择值一时，它将使用列表数组附加选项列表

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

我怎样才能解决这个问题 ？

标签： javascriptjqueryarrays

解决方案

一种简洁的方法是使用从可以附加的数组中map()构建元素的 HTML 字符串：option

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>

推荐阅读