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

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

选自 名称/选项> 年龄 国 收到 厕所 丹 23 24 英国 美国 但选择标记不应不可见。因为HTML页面不能为空，我只想使选项不可见

当main更改时，获取所选选项的值并使用它，选择相关的选择标记并显示它

$.main.changefunction{ $.+$this.val.show.sides.not.main.hide }.触发变化； 选自 名称 年龄 国 如果选择“命名”，则会显示这些名称 厕所 丹 如果选择“年龄”，则会显示这些 23 24 如果选择国家/地区，则会显示这些选项 英国 美国 当main更改时，获取所选选项的值并使用它，选择相关的选择标记并显示它

$.main.changefunction{ $.+$this.val.show.sides.not.main.hide }.触发变化； 选自 名称 年龄 国 如果选择“命名”，则会显示这些名称 厕所 丹 如果选择“年龄”，则会显示这些 23 24 如果选择国家/地区，则会显示这些选项 英国 美国

---

只需为select标记提供适当的ID，并在第一次select的更改事件中隐藏/显示它们

可以使用hidden属性在html中隐藏选择

$'dropdown'。关于'change'，函数{ $'select:notdropdown'.hide；//隐藏除id下拉列表之外的所有选择 $+$this.val.show；//显示select where id=下拉列表的值n/a/c }; 名称 年龄 国 厕所 丹 23 24 英国 美国

---

只需为select标记提供适当的ID，并在第一次select的更改事件中隐藏/显示它们

可以使用hidden属性在html中隐藏选择

$'dropdown'。关于'change'，函数{ $'select:notdropdown'.hide；//隐藏除id下拉列表之外的所有选择 $+$this.val.show；//显示select where id=下拉列表的值n/a/c }; 名称 年龄 国 厕所 丹 23 24 英国 美国 HTML:

演示：

HTML:

演示：

---

嗨，你能试一下吗？因此，我们可以帮助您修复它们。您需要JS来获取所选选项，然后启用下一个选项。请详细说明您试图实现的目标。Hi的可能副本，您可以发布一些尝试吗？因此，我们可以帮助您修复它们。您需要JS来获取所选选项，然后启用下一个选项。请详细说明您试图实现的目标。u make my day@Mohammad的复制我花了很多时间测试适合我的代码。但最终完成了，urs工作了，因为不需要隐藏，大多数代码都需要隐藏，但urs在课堂上工作得很好。我花了很多时间测试对我有用的代码。但最终完成了，urs工作了，因为不需要隐藏，大多数代码都需要隐藏，但urs只在类中工作得很好

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

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

});