jQuery如果填寫了帶有選擇的表單，則顯示div

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

看到這個小提琴

您可以通過javascript中的onchange()事件來執行此操作。 在上面指定的小提琴中，我要做的是，我放置了2個選擇框，並且只有選擇了兩個選擇框時，才會顯示具有id 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

 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>