Блог

У меня есть два поля выбора.

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

как я могу это исправить?

Одним из способов сделать это кратко было бы использовать 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>  

Вероятно, вам нужен for forEach цикл или:

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