使用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

当主<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>

Answer 2

HTML：

<form id="formname" name="formname" method="post" action="submitform.asp" >
    <table width="50%" border="0" cellspacing="0" cellpadding="5">
      <tr>
        <td width="41%" align="right" valign="middle">Category1 :</td>
        <td width="59%" align="left" valign="middle">
          <select name="category1" id="category1">
            <option value="">Select Category1</option>
            <option value="n">name</option>
            <option value="a">age</option>
            <option value="c">country</option>
          </select>
        </td>
      </tr>
      <tr>
        <td align="right" valign="middle">Category2 :</td>
        <td align="left" valign="middle">
          <select disabled="disabled" class="subcat" id="category2" name="category2">
            <option value>Select Category2</option>
            <!-- Home Ware -->
            <optgroup data-rel="n">
              <option value="1">john</option>
              <option value="2">dan</option>
            </optgroup>
            <!-- Education -->
            <optgroup data-rel="a">
              <option value="1">23</option>
              <option value="2">24</option>
            </optgroup>
            <!-- Books -->
            <optgroup data-rel="c">
              <option value="1">uk</option>
              <option value="2">usa</option>
            </optgroup>
          </select>
        </td>
      </tr>
      <tr>
      </tr>
    </table>
  </form>

JS：

$(function(){

    var $cat = $("#category1"),
        $subcat = $(".subcat");

    var optgroups = {};

    $subcat.each(function(i,v){
        var $e = $(v);
        var _id = $e.attr("id");
            optgroups[_id] = {};
            $e.find("optgroup").each(function(){
        var _r = $(this).data("rel");
        $(this).find("option").addClass("is-dyn");
        optgroups[_id][_r] = $(this).html();
            });
    });
    $subcat.find("optgroup").remove();

    var _lastRel;
    $cat.on("change",function(){
        var _rel = $(this).val();
        if(_lastRel === _rel) return true;
        _lastRel = _rel;
        $subcat.find("option").attr("style","");
        $subcat.val("");
        $subcat.find(".is-dyn").remove();
        if(!_rel) return $subcat.prop("disabled",true);
        $subcat.each(function(){
            var $el = $(this);
          var _id = $el.attr("id");
          $el.append(optgroups[_id][_rel]);
        });
        $subcat.prop("disabled",false);
    });

});

演示：

Fiddler

Answer 3

只需为您的选择标签提供适当的 id 并在第一次选择的更改事件中隐藏/显示它们。

您可以使用 hidden 属性隐藏 html 中的选择。

$('#dropdown').on('change',function(){
    $('select:not(#dropdown)').hide(); //hides all selects except the one with id "dropdown"
    $("#" + $(this).val()).show(); //shows the select where id = #dropdown's value ("n"/"a"/"c")
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown">
    <option value="n">name</option>
    <option value="a">age</option>
    <option value="c">country</option>
</select>


<select id="n">
    <option value="1">john</option>
    <option value="2">dan</option>
</select>

<select id="a" hidden>
    <option value="1">23</option>
    <option value="2">24</option>
</select>


<select id="c" hidden>
    <option value="1">uk</option>
    <option value="2">usa</option>
</select>