[英]jQuery show/hide options from one select drop down, when option on other select dropdown is slected
[英]How to make it so when I select one option, it will show one option and hide the other
我有一個主下拉菜單和一個輔助下拉菜單。 當我在第一個下拉菜單中選擇一個選項時,我想要一個相應的下拉菜單出現,當我在主下拉菜單中選擇另一個選項時,要顯示另一個相應的下拉菜單,並隱藏前面顯示的下拉菜單。
我已經嘗試使用$ attr()函數,我認為我正確使用它,但我的方法不起作用
$(document).ready(function(){
$("#main_dropdown").change(function(){
let selectedMajor = $(this).children("option:selected").val();
if (selectedMajor.trim() == 'arts') {
$("div.custom_select_business").attr("display", "none");
$('h3').removeAttr('id');
$("div#hide").removeAttr('id');
$("div.custom_select_art").removeAttr('id');
}
else if (selectedMajor.trim() == 'business') {
$('h3').removeAttr('id');
$("div#hide").removeAttr('id');
$("div.custom_select_business").removeAttr('id');
}
});
});
當我選擇“藝術”時,我希望它隱藏“商業”下拉菜單,但藝術下拉菜單只是出現而沒有其他任何事情發生。
在這里,你應該做你所描述的,做一個主要的選擇,如果它是藝術,將展示藝術,如果它是商業,將展示業務,否則將隱藏兩者。
代碼>>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
</head>
<body>
<div id="main" class="main" style="display:block;">
<label for="artsSelect">main selection</label>
<select class="mainSelect" name="">
<option value="hi"> hi </option>
<option value="arts">arts</option>
<option value="business">business</option>
</select>
</div>
<div id="arts" class="arts" style="display:none;">
<label for="artsSelect">Arts selection</label>
<select class="artsSelect" name="">
<option value="hi"> hi </option>
<option value="hello">hello</option>
<option value="foo">foo</option>
</select>
</div>
<div id="business" class="business" style="display:block;">
<label for="businessSelect">Business selection</label>
<select class="businessSelect" name="">
<option value="hi"> hi </option>
<option value="hello">hello</option>
<option value="foo">foo</option>
<option value="bah">bah</option>
</select>
</div>
</body>
<script type="text/javascript">
$().ready(function(){
$('.mainSelect').change(function(){
if($('.mainSelect').val() == "arts"){
$('#arts').show();
$('#business').hide();
}else if($('.mainSelect').val() == "business"){
$('#arts').hide();
$('#business').show();
}else{
$('#arts').hide();
$('#business').hide();
}
});
});
</script>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.