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

【问题标题】：Get each selected value using chosen jquery plugin使用选择的 jquery 插件获取每个选择的值
【发布时间】：2013-03-02 10:40:30
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript jquery jquery-chosen

【解决方案1】：

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

无论何时进行选择，Chosen 都会触发标准 DOM 事件（它还发送一个选择或取消选择的参数，告诉你哪个选项被改变了）。

所以，如果您只想选择或取消选择最近的选项：

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

【讨论】：

【解决方案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
    ...
});

【讨论】：

【解决方案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
 }

【讨论】：

感谢您的即时帮助。但是它会抛出这个错误：Uncaught TypeError: Cannot use 'in' operator to search '1' in 23
Cannot use 'in' operator to search for '1' in 23 奇怪...听起来错误是从添加的代码中得到的..你有没有尝试评论这个..并尝试一下..看看你是否再次收到错误..跨度>
我想为每个选择做一些功能。我可以使用 $(".selectId").val(); 获取所有选定的项目但我想要一个一个的值，当用户选择项目时，我想在每个选择的某个 div 元素中显示当前选择的值
$(".selectId").val(); 这是给你一个数组吗.. 如果是的话你可以循环遍历数组并使用每个数组.. :)
不，它给了我逗号分隔的值

【解决方案4】：

试试这个

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

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

});

【讨论】：

嘿，谢谢。但我想为每个选择做一些功能。我可以使用 $(".selectId").val(); 获取所有选定的项目；但是我想要一个一个的值，并且当用户选择项目时，我想在每个选择的某个 div 元素中显示当前选择的值
这里的值意味着你只会得到一个值。你观察到它在每个循环中吗
嘿，看看场景：- 我有三个项目：item1，item2，item3，。现在，如果我选择 item3，那么我将在某个 div 元素中显示 item3。之后我选择第 1 项。当我选择第 1 项时，此值将附加到该 div。即现在我的 div 有 item3 和 item1。我希望在相同的选择序列中。

【解决方案5】：

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

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

【讨论】：

【解决方案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());
});

【讨论】：