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选择的选择菜单，则不需要multiple属性。只是旁边那里。

现在到了真正的问题 - 您无法确定当前正在显示的下拉列表。老实说，我不知道浏览器现在会如何显示任何内容，尤其是两个div包含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>

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

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/

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

2 个答案: