selectize.js: Fetch all selected values from selectized dropdown-CodePudding

I have multiple select options have different classes and names and I am using selectize library to allow the user to search. I want to get the selected values on click of a button. Right now, I have tried the following code

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

So, lets suppose i select car 1 and car 2 from the dropdowns, but using the above code, it only return me the selected value in the first dropdown but not both selected values.

CodePudding user response：

This should do it:

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

If you want the values of all select boxes you will need to .map() over them.

The jQueryObject.get() will extract the element selection from the jQuery object, so the following .map() is a plain ("Vanilla") Array.prototype.map() again.

CodePudding user response：

My solution. Create unique <select> class.

I added a working version. Has two unique <select> classes now, with the corresponding 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  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  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>