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

Posted 2023-05-07

【中文标题】选择的 Jquery 插件 - 获取选定的值

【英文标题】：Chosen Jquery Plugin - getting selected values

【发布时间】：2012-05-18 06:38:34

【问题描述】：

如何从选定的多选框中获取选定的值？

【问题讨论】：

@Andrew 这是一个合理的问题 - 我也想知道 Chosen 是否正确修改了底层选择框（结果是 DOM 检查器没有正确刷新）。

@nailer 我的问题不在于合理性，而在于问题所付出的努力。在这种情况下几乎没有。浏览我链接中的四个点，并告诉我是否在此处演示了其中的任何一个。

@Andrew 好点。

@arvind，我使用了您的代码并为我工作，以显示多选。我将 var1=$(this).val() 添加到存储但不知道如何使用表单提交 var1。正在努力。

【参考方案1】：

$("#select-id").chosen().val()

【讨论】：

与接受的答案相比，这对我有用。

显示TypeError: $(...).chosen.val is not a function

@shankshera 是的，我通过val() 得到了它。此错误出现在选择不是有效功能的控制台中。但我选择的其他 api 工作正常。

@Lucky 你的代码实际上缺少两组()。一个在chosen 之后，一个在val 之后。试试$(...).chosen().val()

这对我有用，但我想评论一下，选择在选择下方创建一个 div。这不是您使用 .chosen() 的目标。我错误地将查询选择器设置为“#select-id_chosen”，但正确的选择器是“#select-id”。当使用 jquery 选择错误的标签，然后使用 .chosen() 方法时，它返回此错误：Uncaught TypeError: Cannot read property 'length' of undefined.

【参考方案2】：

就像从任何常规输入/选择/等...：

$("form.my-form .chosen-select").val()

【讨论】：

这不是正确的方法。因为，如果同一页面有多个选择框，它将返回假值:)

这是正确的答案。虽然结果是一个数组，但我的问题是如何从数组中提取值以便将它们放入数据库中。我只需要一些提示这里需要 php 代码。

【参考方案3】：

这对我有用

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

     disable_search_threshold: 10

).change(function(event)

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

);

【参考方案4】：

$("#select-id").chosen().val()

这是正确的答案，我试过了，传递的值是用“，”分隔的值

【讨论】：

这对我不起作用 - 我得到了变量的 2 个副本（当我在 chosen 中选择了 2 个选项时），所以得到了这样的东西：var[] = 111; var[]=3348;

【参考方案5】：

如果有人想在点击某个选项时只获得选定的值，他可以执行以下操作：

$('.chosen-select').on('change', function(evt, params) 
    var selectedValue = params.selected;
    console.log(selectedValue);
);

【讨论】：

您也可以直接引用选择器中的原始选择元素，而不是使用选择的应用.chosen-select 类。

【参考方案6】：

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

在the Chosen doc 中，在页面底部附近关于触发事件的部分中，它显示“选择在原始选择字段上触发许多标准和自定义事件。”这些标准事件之一是更改事件，因此您可以像使用标准选择输入一样使用它。如果你不想的话，你不必乱用 Chosen 的应用类作为选择器。 （对于change事件，也就是。其他事件往往另当别论。）

【参考方案7】：

如果您想获取所选选项的文本 (chosen get display selected value)

 $("#select-id").chosen().find("option:selected" ).text();

【讨论】：

这个或$("#select-id").chosen().find("option:selected" ).attr('somArbitraryAttributeNameFromOptionElement')

【参考方案8】：

这个解决方案对我有用

var ar = [];
$('#id option:selected').each(function(index,valor)
    ar.push(valor.value);
);
console.log(ar);

请确保您的 <option> 标记具有对应的 value 属性。 希望对您有所帮助。

【参考方案9】：

我相信在按 ID 定位时会出现问题，因为 Chosen 会将原始 select 中的 ID 复制到新创建的 div 上，从而在当前页面。

当按 ID 选择时，使用特定于 select 的选择器：

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

...而不是...

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

这是因为 Chosen 将其选定项目镜像回原始（现在隐藏）select 元素，即使在多模式下也是如此。

（无论有没有选择，它也可以继续工作，比如说......如果您决定在您的应用程序中采用不同的方向。）