Показать / скрыть параметры выбора, основанные на значении другого выбора, используя 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

Просто присвойте своим тегам выбора соответствующие идентификаторы и скройте / покажите их в событии изменения первого выбора.

Вы можете скрыть выборки в своем 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>

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);
    });

});

DEMO:

Fiddler

Answer 3

При изменении основного <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>