檢查是否選擇了兩個選項

Question

我需要知道是否選擇了選擇下拉列表中的兩個選項，以便我可以選取文本並製作一個顯示其中的文本的按鈕。現在按鈕在點擊選項之前顯示一些文本，但如果關閉並且已經選擇了選項，則不會再顯示。

如果有人回答了這個問題，請讓我知道我找不到任何東西來幫助我。

這裏是我的代碼：

$(document).ready(function() { 
 
    var valueFrom = $('#revenueFrom option:selected').text(); 
 
    var valueTo = $('#revenueTo option:selected').text(); 
 

 
    if ($('#revenueFrom option').data('clicked', true) && $('#revenueTo option').data('clicked', true)) { 
 
    $('#annual-revenue-button').text(""); 
 
    $('#annual-revenue-button').append(valueFrom + "To:" + valueTo + " " + "×"); 
 
    $('#annual-revenue-button').show('fast'); 
 
    }; 
 

 
}); 
 

 
$('.search-popup').click(function() { 
 
    $(this).hide('fast'); 
 
});

button{ 
 
    background-color:whitesmoke; 
 
    border-radius: 20px; 
 
    display:none; 
 
} 
 
button:hover{ 
 
    background-color:lightgray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<button class="search-popup btn" id="annual-revenue-button" type="button"></button> 
 

 

 
<form class="form-inline revenue"> 
 
    <div class="form-group"> 
 
    <label>Annual Revenue</label> 
 
    <select name="revenueFrom" class="form-control" id="revenueFrom"> 
 
     <option value="" selected disabled>From:</option> 
 
     <option value="0">$0</option> 
 
     <option value="1">$500,000</option> 
 
     <option value="2">$1 Million</option> 
 
     <option value="3">$2.5 Million</option> 
 
     <option value="4">$5 Million</option> 
 
    </select> 
 
    <select name="revenueTo" class="form-control to" id="revenueTo"> 
 
     <option value="" selected disabled>To:</option> 
 
     <option value="0">$0</option> 
 
     <option value="1">$500,000</option> 
 
     <option value="2">$1 Million</option> 
 
     <option value="3">$2.5 Million</option> 
 
     <option value="4">$5 Million</option> 
 
    </select> 
 
    </div> 
 
</form>

Answer 1

您需要在select元素上設置.change()事件偵聽器。
當其中一個已被更改時，檢查那些select元素的值不爲空，然後顯示您的按鈕。

$(document).ready(function() { 
 

 
    $('#revenueFrom, #revenueTo').change(function(){ 
 
    if ($('#revenueFrom').val() && $('#revenueTo').val()) { 
 
     var valueFrom = $('#revenueFrom option:selected').text(); 
 
     var valueTo = $('#revenueTo option:selected').text(); 
 

 
     $('#annual-revenue-button').html("From: " + valueFrom + " To: " + valueTo + " ×").show('fast'); 
 
    }; 
 
    }); 
 

 
}); 
 

 
$('.search-popup').click(function() { 
 
    $(this).hide('fast'); 
 
});

button{ 
 
    background-color:whitesmoke; 
 
    border-radius: 20px; 
 
    display:none; 
 
} 
 
button:hover{ 
 
    background-color:lightgray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<button class="search-popup btn" id="annual-revenue-button" type="button"></button> 
 

 

 
<form class="form-inline revenue"> 
 
    <div class="form-group"> 
 
    <label>Annual Revenue</label> 
 
    <select name="revenueFrom" class="form-control" id="revenueFrom"> 
 
     <option value="" selected disabled>From:</option> 
 
     <option value="0">$0</option> 
 
     <option value="1">$500,000</option> 
 
     <option value="2">$1 Million</option> 
 
     <option value="3">$2.5 Million</option> 
 
     <option value="4">$5 Million</option> 
 
    </select> 
 
    <select name="revenueTo" class="form-control to" id="revenueTo"> 
 
     <option value="" selected disabled>To:</option> 
 
     <option value="0">$0</option> 
 
     <option value="1">$500,000</option> 
 
     <option value="2">$1 Million</option> 
 
     <option value="3">$2.5 Million</option> 
 
     <option value="4">$5 Million</option> 
 
    </select> 
 
    </div> 
 
</form>

Answer 2

您需要添加Multiple並添加[]後name=revenueFrom因此，所有元素的數組正在對錶單提交通過。

這個職位也可能是使用你how to access multiple select array data in javascript

注意此功能：

function getSelectedOptions(element) { 
    // validate element 
    if(!element || !element.options) 
     return []; //or null? 

    // return HTML5 implementation of selectedOptions instead. 
    if (element.selectedOptions) 
     return element.selectedOptions; 

    // you are here because your browser doesn't have the HTML5 selectedOptions 
    var opts = element.options; 
    var selectedOptions = []; 
    for(var i = 0; i < opts.length; i++) { 
     if(opts[i].selected) { 
      selectedOptions.push(opts[i]); 
     } 
    } 
    return selectedOptions; 
} 

這也可能使事件偵聽器，看起來變革上的選擇，插入新元素在其他地方與選定的數據，如果這是你所需要的，隨時更新你的問題，如果你需要更具體的答案。