使用选定的 jquery 插件获取每个选定的值

Get each selected value using chosen jquery plugin

提问by Sam Geeks

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.

我正在使用 Chosen Multiple Select 我想要做的是，如果用户选择任何选项，我想要该值，然后我将根据该值执行一些功能。

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

在没有多重选择的情况下，我可以通过使用 foll 获得选定的值。代码

$(".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??

但是在多选中我再次获得第一个选定的值 n 任何人都可以通过在多选元素中找到当前选定的值来帮助我吗？

回答by Steve de Niese

The Chosen documentationmentions 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).

每当进行选择时，Chosen 都会触发标准 DOM 事件（它还发送一个 selected 或 deselected 参数，告诉您哪个选项已更改）。

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.
});

回答by ghis

Short answer:

简短的回答：

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

你只需这样做： 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
    ...
});

回答by bipen

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

您的代码正在获得正确的选定值map。

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

如果你得到逗号分隔的值，那么使用 split()

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

回答by PSR

try this

尝试这个

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

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

});

回答by Jagannath

The Chosen documentationmentions 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.
});

回答by Faraz Ahmad

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

这就是我让它工作的方式。在我的 html 中，我有这个

<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

然后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());
});