[英]Hide options from select box dynamically (depending on the value of first select)
我有兩個選擇字段作為
選擇字段1:
<select id="minprice" required name="minprice" class="sell-textfield">
<option value="">Select</option>
<option value="3">less than 10 lakh</option>
<option value="1000000">10 Lakhs</option>
<option value="2000000">20 Lakhs</option>
<option value="3000000">30 Lakhs</option>
<option value="4000000">40 Lakhs</option>
<option value="5000000">50 Lakhs</option>
<option value="6000000">60 Lakhs</option>
<option value="7000000">70 Lakhs</option>
<option value="8000000">80 Lakhs</option>
<option value="9000000">90 Lakhs</option>
<option value="10000000">1 Crore</option>
<option value="12000000">1.2 Crores</option>
<option value="14000000">1.4 Crores</option>
<option value="16000000">1.6 Crores</option>
<option value="18000000">1.8 Crores</option>
<option value="20000000">2 Crores</option>
<option value="22500000">2.25 Crores</option>
<option value="30000000">3 Crores</option>
<option value="35000000">3.5 Crores</option>
<option value="40000000">4 Crores</option>
<option value="45000000">4.5 Crores</option>
<option value="50000000">5 Crores</option>
<option value="60000000">6 Crores</option>
<option value="70000000">7 Crores</option>
<option value="80000000">8 Crores</option>
<option value="90000000">9 Crores</option>
<option value="100000000">10 Crores</option>
<option value="150000000">15 Crores</option>
<option value="200000000">20 Crores</option>
<option value="300000000">30 Crores</option>
<option value="400000000">40 Crores</option>
<option value="500000000">50 Crores</option>
<option value="12345678901234567890">Above 50 Crores</option>
</select>
選擇field2:
<select id="maxprice" required name="maxprice" class="sell-textfield">
<option value="">Select</option>
<option value="1000000">10 Lakhs</option>
<option value="2000000">20 Lakhs</option>
<option value="3000000">30 Lakhs</option>
<option value="4000000">40 Lakhs</option>
<option value="5000000">50 Lakhs</option>
<option value="6000000">60 Lakhs</option>
<option value="7000000">70 Lakhs</option>
<option value="8000000">80 Lakhs</option>
<option value="9000000">90 Lakhs</option>
<option value="10000000">1 Crore</option>
<option value="12000000">1.2 Crores</option>
<option value="14000000">1.4 Crores</option>
<option value="16000000">1.6 Crores</option>
<option value="18000000">1.8 Crores</option>
<option value="20000000">2 Crores</option>
<option value="22500000">2.25 Crores</option>
<option value="30000000">3 Crores</option>
<option value="35000000">3.5 Crores</option>
<option value="40000000">4 Crores</option>
<option value="45000000">4.5 Crores</option>
<option value="50000000">5 Crores</option>
<option value="60000000">6 Crores</option>
<option value="70000000">7 Crores</option>
<option value="80000000">8 Crores</option>
<option value="90000000">9 Crores</option>
<option value="100000000">10 Crores</option>
<option value="150000000">15 Crores</option>
<option value="200000000">20 Crores</option>
<option value="300000000">30 Crores</option>
<option value="400000000">40 Crores</option>
<option value="500000000">50 Crores</option>
<option value="12345678901234567890">Above 50 Crores</option>
</select>
現在,我試圖從maxprice隱藏比minprice所選選項小的選項。 因此,我在minprice更改上創建了一個函數,如下所示:
$("#minprice").change(function() {
var i;
for(i=1;i<=32;i++){
if($('#maxprice option').eq(i).val()<$(this).val()) {
$('#maxprice option').eq(i).hide();
}else{
$('#maxprice option').eq(i).show();
}
}
});
如果給定的價格為20十萬,則該功能從maxprice隱藏1千萬,則1.2千萬;如果給定的價格為30十萬,則隱藏22,000,最大價格為2.25千萬。 等等。
我檢查了所有內容,找不到問題所在。
您可以嘗試以下操作: DEMO
$("#minprice").change(function() {
var i = $('option:selected', this).index();
$("#maxprice option").show();
$("#maxprice option:lt("+ i +")").hide();
});
所以兩個選擇都有相同的選項,我想你可以這樣:
$("#minprice").change(function() {
var $this = $(this);
var $option = $this.find('option[value='+$this.val()+']');
var curIndex = $option.index();
$('#maxprice option:lt('curIndex')').hide();
});
嘗試這個 :
<script type="text/javascript">
$(document).ready(function(){
$('#minprice').on('change',function(){
var min = $(this);
var max = $('#maxprice');
var minSel = this.selectedIndex;
max.find('option').removeAttr('disabled').removeAttr('selected');
max.find('option:eq('+minSel+')').prevAll('option').attr('disabled',true);
});
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.