CODEWITHSUNDEEP
javascriptjqueryjquery-chosen
Sam Geeks
Sam Geeks

Reputation: 401

Get each selected value using chosen jquery plugin

I'm using Chosen Multiple Select What I want to do is that if user selects any option I want that value and then I will do some functionality depending on that value.

In chosen without multiple select i can get selected value by using foll. code

$(".selectId").chosen().change(function(){
     selectedValue = $(this).find("option:selected").val();
});

But in multiple select I get the first selected value again n again can anybody help me by finding the current selected value in multiple select element??

Upvotes: 16

Views: 54063

Answers (6)

Faraz Ahmad
Faraz Ahmad

Reputation: 555

This is how I've got it to work. In my html, I've this

<select data-placeholder="Choose a Country..." class="form-control chosen-select" multiple tabindex="4">
    <option value="USA">USA</option>
    <option value="UK">UK</option>
    <option value="CHINA">CHINA</option>
</select>

Then javascript

// apply chosen-js to the DOM, and store it in a variable.
var chosen = $(".chosen-select").chosen({
   no_results_text: "Oops, nothing found!"
}); 

// inside the change event, we get the value by calling chosen.val()
chosen.change(function() {
   console.log('selected tags are', chosen.val());
});

Upvotes: 0

Jagannath
Jagannath

Reputation: 1

The Chosen documentation mentions parameters for getting the most recently changed variables.

$(".CSS Selector").chosen().change(function(e, parameters) {
  // params.selected and params.deselected will now contain the values of the
  // or deselected elements.
});

Upvotes: 0

Steve de Niese
Steve de Niese

Reputation: 984

The Chosen documentation mentions parameters for getting the most recently changed variables.

Chosen triggers the standard DOM event whenever a selection is made (it also sends a selected or deselected parameter that tells you which option was changed).

So, if you just want the most recent option selected or deselected:

$(".selectId").chosen().change(function(e, params){
 // params.selected and params.deselected will now contain the values of the
 // or deselected elements.
});

Otherwise if you want the whole array to work with you can use:

$(".selectId").chosen().change(function(e, params){
 values = $(".selectId").chosen().val();
 //values is an array containing all the results.
});

Upvotes: 24

ghis
ghis

Reputation: 441

Short answer:

You just do this: var myValues = $('#my-select').chosen().val();

Full example:

If you have a select-multiple like this:

<select id="my-select" class="chzn-select" multiple data-placeholder="Choose one or more values...">
  <option value="value1">option1</option>
  <option value="value2">option2</option>
  <option value="value3">option3</option>
</select>

You can get the selected values in an array to doing the following:

// first initialize the Chosen select
$('#my-select').chosen();

// then, declare how you handle the change event
$('#my-select').chosen().change(function(){
    var myValues = $('#my-select').chosen().val();

    // then do stuff with the array
    ...
});

Upvotes: 17

bipen
bipen

Reputation: 36541

your code is gettin the correct selected value.. but since its multiple you need to use loop..or use map to get the selected value and push it into array..

try this

 $(".selectId").chosen().change(function(){
    var  selectedValue = $.map( $(this).find("option:selected").val(), function(n){
              return this.value;
       });
    console.log(selectedValue );  //this will print array in console.
    alert(seletedValue.join(',')); //this will alert all values ,comma seperated
});

updated

if you are getting commaseperated values then use split()

 var values=  $(".selectId").val();
 $.each(values.split(',').function(i,v){
     alert(v); //will alert each value
     //do your stuff
 }

Upvotes: 1

PSR
PSR

Reputation: 40338

try this

 $('.selectId:selected').each(function(i, selected) {

var value = $(selected).val();
var text = $(selected).text();

});

Upvotes: 0

Related Questions