logo标签列表

选定的Jquery插件 - 获取已选择的值

jqueryjquery-chosen
65

如何从已选多选框中获取所选值？

1
@Andrew 这是一个合理的问题 - 我也曾经想知道 Chosen 是否正确地修改了基础的选择框（结果是 DOM 检查器没有刷新）。 - mikemaccana
@nailer 我的问题不在于合理性，而是在于问题所付出的努力。在这种情况下，几乎没有任何努力。请查看我链接中的四个要点，并告诉我这里是否展示了其中任何一个。 - Andrew
@Andrew 很好的观点。 - mikemaccana
@arvind，我使用了你的代码，对于显示多选也适用于我。我添加了var1=$(this).val()来存储，但不知道如何将var1与表单一起提交。正在努力解决。 - Heena Shah
9个回答
97
$("#select-id").chosen().val()
8
相比于被接受的答案，这个对我起了作用。 - pbojinov
显示了 TypeError: $(...).chosen.val 不是一个函数。 - Lucky
@shankshera 是的，我用 val() 得到了它。这个错误在控制台中显示为 chosen is not a valid function。但是我的其他 chosen API 工作正常。 - Lucky
1
@Lucky 你的代码实际上缺少两组 ()。一组在 chosen 后面，另一组在 val 后面。尝试使用 $(...).chosen().val()。 - WhiteHotLoveTiger
1
这对我来说可行，但我想评论一下chosen会在select下面创建一个div。这不是你使用.chosen()所要针对的。我错误地将我的查询选择器设置为'#select-id_chosen'，但正确的选择器应该是'#select-id'。当使用错误的jquery标签进行选择，然后使用.chosen()方法，它会返回此错误：Uncaught TypeError: Cannot read property 'length' of undefined。 - Millar248
70

就像从任何普通的输入框、下拉菜单等获取值一样：

$("form.my-form .chosen-select").val()
5
这不是正确的方法。因为，如果同一页面有多个选择框，它将返回虚假值 :) - Miqdad Ali
1
这是正确的答案。但结果是一个数组，我的问题是如何从数组中提取值，以便我可以将它们放入数据库中。我只需要一些关于所需PHP代码的提示。 - Dimitris Papageorgiou
18

这对我有用

$(".chzn-select").chosen({

     disable_search_threshold: 10

}).change(function(event){

     if(event.target == this){
        alert($(this).val());
     }

});
13
$("#select-id").chosen().val()

这是正确的答案，我尝试过，传递的值是由“,”分隔的值

这对我不起作用 - 当我在chosen中选择了2个选项时，我最终会得到变量的2个副本，因此会得到类似于这样的结果：var[] = 111; var[] = 3348; - kneidels
9
如果有人想要在单击选项时仅获取所选值，则可以执行以下操作：
$('.chosen-select').on('change', function(evt, params) {
    var selectedValue = params.selected;
    console.log(selectedValue);
});
1
您也可以直接在选择器中引用原始的select元素，而不是使用chosen应用的.chosen-select类。 - BobRodes
7

截至2016年，您可以比任何已有的答案更简单地完成此操作：

$('#myChosenBox').val();

其中"myChosenBox"是原始选择输入框的id。或者，在更改事件中：

$('#myChosenBox').on('change', function(e, params) {
    alert(e.target.value); // OR
    alert(this.value); // OR
    alert(params.selected); // also in Panagiotis Kousaris' answer
}

在Chosen文档中，在页面底部附近的触发事件一节中，它说“Chosen在原始选择字段上触发许多标准和自定义事件。”其中一个标准事件是更改事件，因此您可以像使用标准选择输入一样使用它。如果您不想使用Chosen的应用类作为选择器，则无需进行任何操作。（对于更改事件而言，其他事件通常是另一回事。）
3
如果您想获取所选选项的文本（即获取显示的选定值），请使用chosen。
 $("#select-id").chosen().find("option:selected" ).text();
这个或者 $("#select-id").chosen().find("option:selected" ).attr('somArbitraryAttributeNameFromOptionElement') - uchuugaka
2
这个解决方案对我很有用。
var ar = [];
$('#id option:selected').each(function(index,valor){
    ar.push(valor.value);
});
console.log(ar);

请确保您的<option>标签与它们对应的value属性一致。 希望能帮到你。

0

我认为问题出现在通过ID进行目标定位时，因为Chosen会将原始select的ID复制到其新创建的div上，这样就会在当前页面上留下两个具有相同（现在不唯一）ID的元素。

当通过ID定位Chosen时，请使用特定于select的选择器：

$( 'select#yourID' ).on( 'change', function() {
    console.log( $( this ).val() );
} );

...而不是...

$( '#yourID' ).on( 'change', function() {
    console.log( $( this ).val() );
} );

这能够正常工作是因为 Chosen 会将其选定的项目映射回原始（现在隐藏的）select 元素，即使是在多模式下也是如此。
（如果您决定在应用程序中选择其他方向，它仍将继续工作，无论是否使用了 Chosen。）
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接