selectize.js：從選定的下拉串列中獲取所有選定的值

我有多個選擇選項有不同的類和名稱，我正在使用選擇庫來允許用戶搜索。我想通過單擊按鈕獲取選定的值。現在，我已經嘗試了以下代碼

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

所以，假設我從下拉串列中選擇汽車 1 和汽車 2，但使用上面的代碼，它只回傳第一個下拉串列中的選定值，而不是兩個選定值。

uj5u.com熱心網友回復：

這應該這樣做：

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

如果您想要所有選擇框的值，則需要.map()覆寫它們。

jQueryObject.get()將從 jQuery 物件中提取元素選擇，所以下面又.map()是一個普通的（“Vanilla”）Array.prototype.map()。

uj5u.com熱心網友回復：

我的解決方案。創建獨特的<select>類。

我添加了一個作業版本。現在有兩個獨特的<select>類，帶有相應的 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>

標籤：javascript jQuery 选择.js

上一篇：如何在jqueryonclick中傳遞多個引數

下一篇：為Bootstrap3折疊面板添加單獨的按鈕操作