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

Posted 2023-05-07

【中文标题】使用选择的 jquery 插件获取每个选择的值

【英文标题】：Get each selected value using chosen jquery plugin

【发布时间】：2013-03-02 10:40:30

【问题描述】：

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

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

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

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

【参考方案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());
);