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

Question

我正在动态添加多个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

Answer 1

首先，让多个选择具有相同的name属性并不是一种好的做法。如果我们在讨论中去掉Javascript，那么在正常的表单提交过程中，这些元素将自然地相互冲突，并且在这种情况下，表单将遵循具有相同name属性的最后一个元素，而不管隐藏或不隐藏什么。

其次，如果您不需要支持multiple选择的select菜单，那么就不需要multiple属性。这只是个小插曲。

现在来看真正的问题--您无法确定当前显示的是什么下拉列表。老实说，我不知道浏览器现在会如何显示任何东西，特别是在两个div都包含hide类的情况下。

把所有这些放在一边，我认为您最好的选择是:使用模糊选择器并利用visible选择器。它看起来像这样：

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

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

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

还有一点，我注意到你有data-placeholder="Choose a state"，除非你让一些Javascript在那里做一些(不必要的)花哨的动作，否则它不会工作。相反，我建议在您的select中添加此选项

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

位于选项列表的顶部意味着它在页面加载时被自动选中，如果值为空，则表示文本"Select your state...“不会作为值发送，您可以检查是否有空字符串进行验证。

Answer 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/