显示来自第二个选择选项的输入

Question

在用户从第二个选择菜单选项中选择一个选项后，我无法显示输入。此外，每当用户选择任何第二个选择选项时，它都应该显示他们的输入。

抱歉标题令人困惑，但基本上我的问题是如何使用从一个下拉菜单中的选择来决定接下来显示哪个下拉菜单？我想做这样的事情：

• 选择菜单
  • 选项#1
  • 选项 #2
  • 选项#3

选择选项 #2 将打开另一个选择菜单：

• 子选项#1.1
• 子选项#1.2
• 子选项#1.3

然后当用户选择选项 from 将打开另一个选择选项 2 时，它将显示选择和输入框的标签，以便用户可以输入文本

$("[data-child]").change(function() {
  const selectedGroup = $(this).val();
  var $childSelect = $("#" + $(this).attr("data-child"));
  value = $childSelect.find('option').hide()
    .filter(function(i, e) {
      return $(e).val().startsWith(selectedGroup)
    }).show().eq(0).val();
  $childSelect.val(value);
  $childSelect.trigger('change');
});

$("[data-child]").eq(0).trigger('change');
//codes for input
$(document).ready(function() {
  $("#niv1").change(function() {
    if ($(this).find("option:selected").val() == "1-1-2") {
      $("#other").removeAttr("disabled")
    } else {
      $("#other").attr("disabled", "disabled")
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="frmContact" id="" frmContact "" method="post" action="" enctype="multipart/form-data">
  <div class="banner">
    <h1>ID Service Request Form</h1>
  </div>
  <p>Please fill out with the information that is requested below and submit the id request form. Thank you!</p>
  <fieldset>
    <legend>Request Type</legend>
    <table width="50%" border="0" cellspacing="0" cellpadding="5">
      <tr>
        <td width="41%" align="right" valign="middle">Select a option:</td>
        <td width="59%" align="left" valign="middle">
          <select name="category1" id="category1">
            <option value="">Select Category</option>
            <option value="a">AS400</option>
            <option value="w">Windows</option>
            <option value="o">Outlook</option>
          </select>
        </td>
      </tr>
      <tr>
        <td align="right" valign="middle">Select a option:</td>
        <td align="left" valign="middle">
          <select disabled="disabled" class="subcat" id="category2" name="category2">
            <option value>Select Category</option>
            <!-- AS400 -->
            <optgroup data-rel="a">
              <option value="1">Modify Account</option>
              <option value="2">New AS400 Account</option>
              <option value="3">Change Deapartment</option>
              <option value="3">Reset Password</option>
            </optgroup>
            <!-- windows -->
            <optgroup data-rel="w">
              <option value="1">Create Domain ID</option>
              <option value="2">Access to Particular Folder/Drive</option>
            </optgroup>
            <!-- Outlook -->
            <optgroup data-rel="o">
              <option value="1">Plish Mail</option>
              <option value="2">Notification</option>
            </optgroup>
          </select>
        </td>
      </tr>
      <tr>
      </tr>
    </table>
  </fieldset>
</form>

Answer 1

考虑以下示例。

$(function() {
  $("#category1").change(function() {
    var selected = $(this).val();
    if (selected == "") {
      $("#category2").prop("disabled", true);
    } else {
      $("#category2 optgroup").hide();
      $("#category2 > option").not(":first").remove();
      var options = $("#category2 optgroup[data-rel='" + selected + "']").children().clone().appendTo("#category2");
      $("#category2").prop("disabled", false);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="frmContact" id="" frmContact "" method="post" action="" enctype="multipart/form-data">
  <div class="banner">
    <h1>ID Service Request Form</h1>
  </div>
  <p>Please fill out with the information that is requested below and submit the id request form. Thank you!</p>
  <fieldset>
    <legend>Request Type</legend>
    <table width="50%" border="0" cellspacing="0" cellpadding="5">
      <tr>
        <td width="41%" align="right" valign="middle">Select a option:</td>
        <td width="59%" align="left" valign="middle">
          <select name="category1" id="category1">
            <option value="">Select Category</option>
            <option value="a">AS400</option>
            <option value="w">Windows</option>
            <option value="o">Outlook</option>
          </select>
        </td>
      </tr>
      <tr>
        <td align="right" valign="middle">Select a option:</td>
        <td align="left" valign="middle">
          <select disabled="disabled" class="subcat" id="category2" name="category2">
            <option value>Select Category</option>
            <!-- AS400 -->
            <optgroup data-rel="a">
              <option value="1">Modify Account</option>
              <option value="2">New AS400 Account</option>
              <option value="3">Change Deapartment</option>
              <option value="3">Reset Password</option>
            </optgroup>
            <!-- windows -->
            <optgroup data-rel="w">
              <option value="1">Create Domain ID</option>
              <option value="2">Access to Particular Folder/Drive</option>
            </optgroup>
            <!-- Outlook -->
            <optgroup data-rel="o">
              <option value="1">Plish Mail</option>
              <option value="2">Notification</option>
            </optgroup>
          </select>
        </td>
      </tr>
      <tr>
      </tr>
    </table>
  </fieldset>
</form>

当#category1 更改时，这会显示和隐藏#category2 中的选定类别。