是否可以根据用户从上一个下拉列表中选择的内容,使用jQuery隐藏选择/下拉列表中的选项,例如:
如果用户为8(年龄选择/下拉),并且选择了主题英语(主题选择/下拉),然后从(位置下拉列表)隐藏位置2?
<select name="age">
<option value="8">8</div>
<option value="9">9</div>
<option value="10">10</div>
<option value="11">11</div>
</select>
<select name="subject">
<option value="eng">English</div>
<option value="maths">Maths</div>
<option value="science">Science</div>
</select>
<select name="subject">
<option value="loc-1">Location One</div>
<option value="loc-2">Location Two</div>
<option value="loc-3">Location Three</div>
</select>
谢谢!
答案 0 :(得分:1)
您可以执行以下操作
PromiseValue
$(document).on('change', '.age', function(e){
var val = $(this).val();
var subject = $('.subject').find(":selected").val();
if(val == 8 && subject == 'English' ){
$('.location option[value="Two"]').hide();
} else {
$('.location option[value="Two"]').show();
}
})
$(document).on('change', '.subject', function(e){
var age = $('.age').find(":selected").val();
var val = $(this).val();
if(age == 8 && val == 'English' ){
$('.location option[value="Two"]').hide();
} else {
$('.location option[value="Two"]').show();
}
})
答案 1 :(得分:1)
您只需要在下拉菜单中添加更改功能,并根据需要添加逻辑即可。参见下面的示例。
$(document).ready(function(){
$("#age").change(function(){
hideOption();
})
$("#subject").change(function(){
hideOption();
})
})
function hideOption(){
var age=$("#age").val();
var subject=$("#subject").val();
if(age==8 && subject=="Maths"){
$("#location [value='Location Two']").hide();
}
else{
$("#location [value='Location Two']").show();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="age" id='age'>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select>
<select name="subject" id='subject'>
<option value="English">English</option>
<option value="Maths">Maths</option>
<option value="Science">Science</option>
</select>
<select name="Location" id='location'>
<option value="Location One">Location One</option>
<option value="Location Two">Location Two</option>
<option value="Location Three">Location Three</option>
</select>
答案 2 :(得分:0)
使用jQuery,您可以使用.hide()
和.show()
来切换元素可见性。但是,首先,您可以检查选择值(例如年龄)是否已更改。例如,根据您想要的逻辑,可以检查更改的值是什么,并在符合条件的情况下执行某些操作。
例如:
$( "#age-select" ).change(function() {
var value = $(this).val();
if(value == 8) {
$("#location-two").hide();
} else {
$("#location-two").show();
}
});
但是,请注意,我为“位置2”选项(“位置2”)和年龄选择元素添加了id
。另外,要使其正常工作,您必须修复值以使它们不全为8,并修复元素的结束标记(不是)。