Conditional dropdown is needed if the option is no then only the other should appear if not it must be null [closed]

问题

<div class="form-group">
            <label asp-for="son" class="control-label"></label>
            @*<input asp-for="son" class="form-control" />*@
            <select name="son" id="son">
                <option value="none" selected="selected"> -- choose one --</option>
                <option>Yes</option>
                <option>No</option>
            </select>
            <span asp-validation-for="son" class="text-danger"></span>
        </div>

If the above dropdown of id son is NO then only the dropdown id of father should appear.

<div class="form-group">
            <label asp-for="father" class="control-label a"></label>
            @*<input asp-for="father" class="form-control" />*@
            <select name="father" id="father">
                <option value="none" selected="selected"> -- choose one --</option>
                <option>Signed SOW Awaited</option>
                <option>Onboarding in Progress</option>

回答1:

I think what you are looking for is jquery. With this, you can check if the #son is set to "no" and then set another piece of code to show and hide. Here is a piece of code that should look a lot like what you want:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <div class="form-group">
    <label asp-for="son" class="control-label">Son</label>
    <select name="son" id="son">
      <option value="none" selected="selected"> -- choose one --</option>
      <option value="yes">Yes</option>
      <option value="no">No</option>
    </select>
    <div id="father" style="display: none;">
      <label asp-for="father" class="control-label a">Father</label>
      <select name="father">
        <option value="none" selected="selected"> -- choose one --</option>
        <option>Signed SOW Awaited</option>
        <option>Onboarding in Progress</option>
      </select>
    </div>
  </div>
  <script>
    $("#son").change(function() {
      if ($(this).val() === "no") {
        $("#father").show();
      } else {
        $("#father").hide();
      }
    });
  </script>
</body>

</html>

JQuery might be a little intimidating at first, but I suggest just sticking to the basics like this. This is also pretty much all I know about JQuery.

来源：https://stackoverflow.com/questions/63214841/conditional-dropdown-is-needed-if-the-option-is-no-then-only-the-other-should-ap

标签

php

html

ajax

forms

model-view-controller