Question

我遇到的问题是没有通过该功能显示第二个选择菜单。

我在这里跟着[link] [1]，我仍然没有让它工作

[在此输入图像说明] [2]

更新：试图通过此代码获得更多进展并遇到问题。我一直得到的错误是：

“TypeError：无法读取null的属性'style' 在安排（：7：20）在HTMLSelectElement.onchange（https://null.jsbin.com/runner:1:298）“

  <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div>
    <form>
      <p>Please do the following: <textarea> </textarea> <br /> <br /> Please do the follwing:</p>
<select id="actions" onchange = scheduling()>
  <option value=" "></option>
  <option value="report">Report</option>
  <option value="schedule">Schedule</option>
  <option value="research">Research</option>
  <option value="go to">Go to</option>
</select>
<p><input type="submit" /></p>
    </form>
  </div>
  <fieldset>
  <div name = "Schedule">
    <form id = scheduleProtocol style= "visibility:hidden">
      <p> With who? </p> <textarea> </textarea> <br>
      <p> Schedule what?</p>
      <select>
        <option value = "Breakfast"> Breakfast</option>
        <option value = "Lunch"> Lunch</option>
        <option value = "Dinner"> Dinner</option>
        <option value = "A Call "> A Call </option>
      </select>
      <br>
      <div name = "Schedule_Purpose">
      <p> For what purpose? </p>
      <select>
      <option value="Catching Up"> Catching Up</option>
      <option value="Building Relationship/s"> Building Relationships </option>
      <option value="Sales">Sales</option>
      <option value="Customer Success"> Customer Success</option>
      <option value="Advice">Advice</option>
      <option value="Learning">Learning</option>
      <option value= "Team Building"> Team Building</option>
      <option value= "Problem Solving"> Problem Solving</option>
      <option value= "Funding/Investment"> Funding/Investment</option>
      <option value = "Shared Goal/ Bucket List"> Shared Goal/ Bucket List</option>
      <option value ="Relationship Maintenance"> Relationship Maintenance</option>
      <option value ="Strategic Partnership"> Strategic Partnership</option>
    </select>
  </div>
  <br>
  <p> Where? </p>
  <select>
  <option value="to You"> Convenient to You </option>
  <option value="to them"> Convenient to them </option>
  <option value="both Parties">Both Parties</option>
</select>
<br>
<p>When?</p>
  <select>
    <option value="Exact Date">Exact Date</option>
    <option value="Next Week"> Within the next week </option>
    <option value="Next Two Weeks">Within the next two weeks</option>
    <option value="Quarterly">Quarterly</option>
  </select>
  <br>
  <br>
  <input type = "submit">
  </fieldset>
  <div name = "Report Values">
    <select>
      <p> Report to me: when? </p>
      <option value = "Monday">Monday</option>
      <option value ="Tuesday"> Tuesday</option>
      <option value = "Wednesday"> Wednesday</option>
      <option value = "Thursday">Thursday</option>
      <option value ="Friday"> Friday </option>
      <option value = "Saturday"> Saturday</option>
      <option value = "Sunday"> Sunday </option>
    </select>
    <br> 
    <p> At what time?</p>
    <select>
      <option value = "1 pm"> 1 pm</option>
      <option value ="2 pm"> 2 pm</option>
      <option value = "3 pm"> 3 pm</option>
      <option value = "4 pm"> 4 pm</option>
      <option value ="5 pm"> 5 pm </option>
      <option value = "6 pm"> 6 pm</option>
      <option value = "7 pm"> 7 pm</option>
    </select>
  </div>
    </form>
  </div>
<script> 
function scheduling() {
  var selectedItems = document.getElementById('actions');
  var userInput = selectedItems.options[selectedItems.selectedIndex].value;
  var scheduleProtcol = document.getElementById('scheduleProtcol');
  if (userInput == "schedule") {
    scheduleProtcol.style.visibility = "visible"; }
    else {
      scheduleProtcol.style.visibility = "hidden"; 
    }
}
</script> 

  </body>
</html>

Answer 1

以下是代码：

<select id="list" onchange="return showApples()">
 <option value="AL">Grapes</option>
 <option value="NL">Apple</option>
</select>

<select id="AppleTypes"style="visibility:hidden">
 <option value="GR">Granny</option>
</select>

<script>
  function showApples()
  {
      var selectedItems = document.getElementById("list");
      var userInput = selectedItems.options[selectedItems.selectedIndex].value;

      if (userInput == "NL")
        document.getElementById("AppleTypes").style.visibility = "visible";
      else
        document.getElementById("AppleTypes").style.visibility = "hidden";
  }
</script>

Answer 2

  function showApples(){
      var selectedItems = document.getElementById("list");
      var appleTypes = document.getElementById("AppleTypes")
      var userInput = selectedItems.options[selectedItems.selectedIndex].value;
      if (userInput == "NL"){
        appleTypes.style.visibility = "visible";
      }
      else{
        appleTypes.style.visibility = "hidden";
      }
  }

<form>
  <select id="list" onchange="showApples()">
    <option value="nothing"></option>
    <option value="NL">Apple</option>
    <option value="AL">Ball</option>
    <option value="DL">Cat</option>
  </select>

  <select id="AppleTypes"style="visibility:hidden">
    <option value="GR">Granny</option>
    <option value="FU">Fuji</option>
  </select>
</form>

您错误的代码：<select id="list" onChange="return showApples()">

应该像这样更改：<select id="list" onchange="showApples()">

onChange =＆gt; onchange

javascript选择隐藏的功能问题

2 个答案: