javascript - 使用 javascript/jquery 根据另一个选择的值显示/隐藏选择选项？

Question

我想选择并获取结果，但选项应该是不可见的，所以当我选择名称时，它们会像这样显示

# SELECT FROM 
<select>
    <option value="n">name/option>
    <option value="a">age</option>
    <option value="c">country</option>
</select>  
# GET 
<select>
    <!-- # IF YOU SELECT NAME THESE SHOW UP -->
    <option value="1">john</option>
    <option value="2">dan</option>
</select>
<select>
    <!-- IF YOU SELECT AGE THESE SHOW UP -->
    <option value="1">23</option>
    <option value="2">24</option>
</select>
<select>
    <!-- IF YOU SELECT COUNTRY THESE SHOW UP -->
    <option value="1">uk</option>
    <option value="2">usa</option>
</select>

但是选择标签不应该是不可见的。因为 HTML 页面不能为空，我只想让选项不可见

Answer 1

当main <select>更改时，获取所选选项的值并使用它，选择相关的选择标签并显示它。

$(".main").change(function(){
  $("."+$(this).val()).show().siblings().not(".main").hide()
}).trigger("change");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
# SELECT FROM 
<select class="main">
  <option value="n">name</option>
  <option value="a">age</option>
  <option value="c">country</option>
</select>
<br>
<select class="n">
  # IF YOU SELECT NAME THESE SHOW UP
  <option value="1">john</option>
  <option value="2">dan</option>
</select>
<br>
<select class="a">
  # IF YOU SELECT AGE THESE SHOW UP
  <option value="1">23</option>
  <option value="2">24</option>
</select>
<br>
<select class="c">
  IF YOU SELECT COUNTRY THESE SHOW UP
  <option value="1">uk</option>
  <option value="2">usa</option>
</select>