javascript - jQuery 如果带有选择的表单已填写，则显示 div

Question

我正在寻找一种方法，以便当用户从所有选择中选择一个项目(选项的值不为零)时，会显示 id 为“js-market”的 div。

这是我的 html 代码:

<form class="js-chose">

    <div class="col-md-6 col-xm-12">
    <div class="form-group js-select">
        <label>Select a Market</label>
    <select class="form-control">
     <option value='' disabled selected>Chose a Market</option>
        <%Item.all.each do |item|%>
        <option value="<%=item.id%>"><%=item.name.capitalize%></option>
        <%end%>
    </select>
    </div>
    </div>

    <div class="col-md-6 col-xm-12">
    <div class="form-group">
        <label>Enter Market with:</label>
    <select class="form-control js-select">
        <option value='' disabled selected>Chose a Company</option>
        <%Company.where(user_id: current_user.id).each do |company|%>
        <option value="<%=company.id%>"><%=company.name%></option>
        <%end%>
    </select>
    </div>
    </div>
</form>

简而言之，当用户填写了两个选择并获取所选项目的值并将它们分配给变量时，我需要让 jQuery 显示 id="js-market"的 div。

谢谢。如果我不够清楚，请告诉我。

Answer 1

使用多个选择元素的示例

链接到jsfiddle

var counter = $('.select').length;
$('.select').change(function() {
    $.each($('.select'),function(i,e) {
        var t = $(this);
        if (t.val() == undefined || t.val() == '') {
            $('#js-market').fadeOut();
            return;
        }
        if (i+1 == counter) {
            $('#js-market').fadeIn();
        }
    });
});

#js-market {
    display: none;
}

<select class="select">
    <option value="">No Value</option>
    <option value="value1">Value 1</option>
    <option value="value2">Value 2</option>
    <option value="value3">Value 3</option>
    <option value="value1">Value 4</option>
</select>
<select class="select">
    <option value="">No Value</option>
    <option value="value1">Value 1</option>
    <option value="value2">Value 2</option>
    <option value="value3">Value 3</option>
    <option value="value1">Value 4</option>
</select>

<select class="select">
    <option value="">No Value</option>
    <option value="value1">Value 1</option>
    <option value="value2">Value 2</option>
    <option value="value3">Value 3</option>
    <option value="value1">Value 4</option>
</select>
<div id="js-market">Lorem ipsum</div>