如何获取多个选定下拉列表的选定值答案

【问题标题】：How to get the selected values of multiple chosen dropdowns如何获取多个选定下拉列表的选定值
【发布时间】：2022-04-24 16:20:06
【问题描述】：

我正在动态添加多个 jquery 选择的下拉菜单，其中多个属性为 true。如何获取所选下拉菜单的选项？最终用户将仅从一个状态下拉列表中选择值

我的 HTML 代码：

<div class="hide state" id="State-1">
<select name='state' id="state-1" multiple="" class="chosen-select choice stateOption" data-placeholder="Choose a State...">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
</select>
</div>

<div class="hide state" id="State-2">
<select name='state' id="state-2" multiple="" class="chosen-select choice stateOption" data-placeholder="Choose a State...">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
</select>
</div>

我的 JS 代码如下：

jQuery(function($) {
  $(".chosen-select").chosen();
  $('.choice').on('change' , function(e, info){

    var stateVal = $(".stateOption").chosen().find("option:selected");  //console.log(stateVal);

    if(stateVal !== null) {
        $.each(stateVal, function(index){
            data.state.push($(this).val()); //console.log($(this).val());
        });
    }

  });
})

here is a fiddle with the provided code

【问题讨论】：

标签： jquery selected jquery-chosen

【解决方案1】：

首先，使用相同的name 属性进行多次选择并不是一个好习惯。如果我们从这个讨论中删除 Javascript，这些元素会在正常的表单提交期间自然地相互冲突，在这种情况下，表单将服从具有相同 name 属性的最后一个元素，不管是什么隐藏与否。

其次，如果您不需要支持multiple 选择的选择菜单，则不需要multiple 属性。就在旁边。

现在是真正的问题 - 您无法确定当前正在显示什么下拉菜单。老实说，我不知道浏览器现在会如何显示任何内容，尤其是 divs 都包含 hide 类。

抛开所有这些，我认为您最好的选择是：使用模糊选择器并使用visible 选择器。它看起来像这样：

<select name="state-1">
<select name="state-2">

$("select[name^=state]:visible").val();

此选择器将找到名称以“状态”开始且可见的选择项。您避免了正常表单提交的冲突，而且，我认为您的更大问题之一是，我们使用val() 来获取当前值。这就是你所需要的。

还有一点，我注意到你有data-placeholder="Choose a state"，除非你有一些 Javascript 在那里做一些（不必要的）花哨的动作，否则它是行不通的。相反，我建议将此选项添加到您的 select:

<option value="">Select your state...</option>

位于选项列表的顶部意味着它会在页面加载时自动选择，如果值为空，则意味着文本“选择您的状态...”不会作为值发送，并且您可以检查空字符串进行验证。

【讨论】：

我正在为这些选择使用 Bootsrap 和 jquery，即使它们是多项选择。我正在添加这些选择并添加更多动态 div。

【解决方案2】：

试试这个，将值保存在两个数组中：

$(function () {
    var foo = [];
    $('#state-1').on('change', function (e) {
        console.clear()
        $('#state-1 :selected').each(function (i, selected) {
            foo[i] = $(selected).text();
        });
        console.log(foo);
    });
    var foo2 = [];
    $('#state-2').on('change', function (e) {
        console.clear()
        $('#state-2 :selected').each(function (i, selected) {
            foo2[i] = $(selected).text();
        });
        console.log(foo2);
    });

})

http://jsfiddle.net/2BQe7/2/

【讨论】：

对此的建议编辑指出 foo 和 foo2 应放置在它们各自的内部函数中，以便每次都重新初始化它们。您能在此处和 jsfiddle 中进行更正吗？

【解决方案3】：

我正在处理一个根据主菜单值工作的子菜单。我从:selected 此处的一篇帖子中添加到我的 jquery 中，它起作用了。

const sub_category = $('.subcategorymenu :selected').val();

if (sub_category.value !== 'Choose a Category') {
 alert("sub");
}

【讨论】：