Question

我正在寻找一种方法，以便当用户从所有选择中选择一个项目时（选项的值不是nil），显示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

请参阅此fiddle

您可以通过javascript中的onchange()事件执行此操作。在上面指定的小提琴中，我做的是，我已经放置了两个选择框，只有在选择了两个选择框时才会显示标识为demo的div。

<强> HTML

<select id="mySelect1" onchange="myFunction()">
    <option value="0">--Select--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<select id="mySelect2" onchange="myFunction()">
    <option value="0">--Select--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<div id="demo"></div>

<强> JS

function myFunction() {
    if (document.getElementById("mySelect1").value > 0 && document.getElementById("mySelect2").value > 0) {
        document.getElementById("demo").style.display = "block";
    } else document.getElementById("demo").style.display = "none";
}

Answer 2

适用于多个选择元素的示例

链接到jsfiddle

＆＃13;

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();
        }
    });
});

＆＃13;

#js-market {
    display: none;
}

＆＃13;

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

＆＃13;

jQuery如果填写了选择的表单，则显示div

2 个答案:

请参阅此fiddle