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

Question

我正在使用Chosen多选框，希望用户选择任何选项后，我能够获取其值并根据该值执行一些功能。

在不使用多选的情况下，可以使用以下代码来获取所选值：

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

但在多选时，我一再获得第一个已选择的值。请问有人能帮忙找到当前在多选元素中选择的值吗？

- Sam Geeks

Answer 1

Chosen documentation 中提到了获取最近更改的变量的参数。

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

因此，如果您只想要最近选择或取消选择的选项：

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

否则，如果您想要整个数组与您一起工作，可以使用：

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

- Steve de Niese

Answer 2

简短回答：

你只需要这样做：var myValues = $('#my-select').chosen().val();

完整示例：

如果你有一个类似这样的多选下拉框：

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

您可以通过以下方式将所选值存储在数组中：

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

- ghis

Answer 3

您的代码已经获得了正确的选定值...但由于它是多选的，您需要使用循环或使用map来获取所选值并将其推入数组中。

尝试这个：

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

更新

如果您得到逗号分隔的值，则使用split()函数。

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

- bipen

---

谢谢您的即时帮助。但是它抛出了这个错误：Uncaught TypeError: Cannot use 'in' operator to search for '1' in 23。 - Sam Geeks

无法使用'in'运算符在23中搜索'1'。奇怪...听起来不像是错误来自于添加的代码...你试着注释掉它，然后再试一下...看看你是否会再次收到错误信息... - bipen

我想针对每个选择执行某些功能。我可以使用 $(".selectId").val(); 获取所有选定的项目。但我想逐一获取值，并且当用户选择项目时，我希望在每个选择上将当前选择的值显示在某个 div 元素中。 - Sam Geeks

$(".selectId").val(); 这个会给你一个数组吗？如果是的话，你可以循环遍历这个数组并使用其中的每一个元素。 :) - bipen

不，它给我逗号分隔的值。 - Sam Geeks

嘿，看这个场景：我有三个项目：item1、item2、item3。现在，如果我选择了item3，那么我将在某个div元素中显示item3。之后我选择了item1。当我选择item1时，这个值将追加到该div中。也就是说，现在我的div中有item3和item1。我希望它们的顺序与选择的顺序相同。 - Sam Geeks

Answer 4

Chosen documentation提到了获取最近更改的变量参数。

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

- Jagannath

Answer 5

试一下这个

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

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

});

- PSR

---

嘿，谢谢。但是我想为每个选择做一些功能。我可以通过使用 $（“.selectId”）.val（）来获取所有选定的项目；但我想一个接一个地获取值，并且当用户选择项目时，我想在每次选择时将当前选定的值显示在某个div元素中。 - Sam Geeks

这里的value指的是每次循环中只获取一个值。你有没有注意到它在每个循环中都存在？ - PSR

嘿，看一下这个场景：我有三个项目：item1、item2和item3。现在，如果我选择item3，那么我将在某个div元素中显示item3。然后我选择item1。当我选择item1时，这个值将追加到该div中。也就是说，现在我的div中有item3和item1。我希望按照选择的顺序排列。 - Sam Geeks

Answer 6

这是我让它工作的方式。在我的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>

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

- Faraz Ahmad