selectize.js：从选定的下拉列表中获取所有选定的值

Question

我有多个 select 选项具有不同的类和名称，我正在使用 selectize 库以允许用户搜索。我想通过单击按钮获得 selected 值。现在，我尝试了以下代码

$(window).bind("load", function()
{
    var selectize_search_1 = $('.selectize_search_1').selectize(
    {
        sortField: 'text'
    });
});
function fetch_cars()
{
    var cars_value = $('.selectize_search_1')[0].selectize.items;
    alert (cars_value);
}

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js"></script>

<select class="selectize_search_1" name="cars[]" required>
    <option value="">Select Car</option>
    <option value="C1">Car 1</option>
    <option value="C2">Car 2</option>
    <option value="C3">Car 3</option>
</select>
<br />
<select class="selectize_search_1" name="cars[]" required>
    <option value="">Select Car</option>
    <option value="C1">Car 1</option>
    <option value="C2">Car 2</option>
    <option value="C3">Car 3</option>
</select>
<hr />
<button type="button" onclick="fetch_cars();">Fetch Cars</button>

所以，假设我 select 汽车 1 和汽车 2 来自下拉列表，但是使用上面的代码，它只 return 我第一个下拉列表中的 selected 值但不是两个 selected 值。

Answer 1

应该这样做：

$(function(){
   var selectize_search_1 = $('.selectize_search_1').selectize({sortField: 'text'});
});

function fetch_cars(){
   var cars_value = $('select.selectize_search_1').get().map(el=>el.value).join(",");
   console.log(cars_value);
}

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js"></script>

<select class="selectize_search_1" name="cars[]" required>
    <option value="">Select Car</option>
    <option value="C1">Car 1</option>
    <option value="C2">Car 2</option>
    <option value="C3">Car 3</option>
</select>
<br />
<select class="selectize_search_1" name="cars[]" required>
    <option value="">Select Car</option>
    <option value="C1">Car 1</option>
    <option value="C2">Car 2</option>
    <option value="C3">Car 3</option>
</select>
<hr />
<button type="button" onclick="fetch_cars();">Fetch Cars</button>

如果您想要所有 select 个框的值，您需要 .map() 覆盖它们。

jQueryObject.get()将从jQuery对象中提取元素selection，所以下面的.map()是一个普通的（“Vanilla”）Array.prototype.map() 再次.

Answer 2

我的解决方案。创建唯一 <select> class.

我添加了一个工作版本。现在有两个独特的 <select> class，对应的 jQuery.

$(window).bind("load", function() {
  var selectize_search_1 = $('.selectize_search_1').selectize({
    sortField: 'text'
  });
  //create new selectize...
  //create new selectize...
  var selectize_search_2 = $('.selectize_search_2').selectize({
    sortField: 'text'
  });

});

function fetch_cars() {
  var cars_value = $('.selectize_search_1')[0].selectize.items;
  //make another var...
  //make another var...
  var cars_value2 = $('.selectize_search_2')[0].selectize.items;
  //retrieve new selectize...
  //retrieve new selectize...
  alert("select1: "+cars_value + " select2: " + cars_value2);
}

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js"></script>

<select class="selectize_search_1" name="cars[]" required>
  <option value="">Select Car</option>
  <option value="C1">Car 1</option>
  <option value="C2">Car 2</option>
  <option value="C3">Car 3</option>
</select>
<br />
<!-- add new class -->
<!-- add new class -->
<select class="selectize_search_2" name="cars[]" required>
<!-- add new class -->
<!-- add new class -->

  <option value="">Select Car</option>
  <option value="C1">Car 1</option>
  <option value="C2">Car 2</option>
  <option value="C3">Car 3</option>
</select>
<hr />
<button type="button" onclick="fetch_cars();">Fetch Cars</button>

selectize.js：从选定的下拉列表中获取所有选定的值

selectize.js: Fetch all selected values from selectized dropdown

javascript

jquery

selectize.js