检查是否选择了两个选项

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

这也可能使事件侦听器，看起来变革上的选择，插入新元素在其他地方与选定的数据，如果这是你所需要的，随时更新你的问题，如果你需要更具体的答案。