显示在下拉列表中的其他字段

Question

我需要一些帮助。我正在做一份提交表格。我有一些需要更多信息的领域 - 人和车辆。当我在下拉框中点击人或车辆时，我需要更多字段来填写以显示。当我独自做人时，这很好。当我尝试用车辆参与时，我遇到了问题。当我点击车辆时，它也会调出人物场。我可能正在做一些非常愚蠢的事情。任何建议将不胜感激

    <form action="/action_page.php" method="post">

  URN:<br>
  <input type"text" name="urn" id="urntarget"><br><br>

  Type:
  <form action="../">
<select name="form_select" onchange="showDiv(this)" id="selectbox">
    <option value="">Choose a type...</option>
    <option value="1">Person</option>
    <option value="2">Vehicle</option>
    <option value="3">Building</option>
    <option value="4">Public Access Point</option>
    <option value="5">Address</option>
</select>
<div id="hiding_div" style="display:none;"><br>
<h3>Person Details</h3>

<form action="/action_page.php" method="post">


  First name:<br>
  <input type="text" name="firstname"><br>
  <br>
  Last name:<br>
  <input type="text" name="lastname"><br>
  <br>
  Gender:<br>
  <select name="gender">
  <option value="female">Female</option>
  <option value="male">Male</option>
  <option value="transman">Trans Man</option>
  <option value="transwoman">Trans Woman</option>
  <option value="other">Other</option>
  </select><br>
  <br>
  Race:<br>
  <select name="race">
  <option value="black">Black</option>
  <option value="hispanic">Hispanic</option>
  <option value="oriental">Oriental</option>
  <option value="white">White</option>
  </select><br>
  <br>

  Address:<br>
  <input type="text" name="address"><br>
  <br>
  Date of Birth:<br>
  <input type="text" name="dateofbirth"><br>
  <br>
  Nationality:<br>
  <input type="text" name="nationality"><br>
  <br>
  Accent:<br>
  <input type="text" name="accent"><br>
  <br>
  Description:<br>
  <input type="text" name="description"><br>
  <br>
  Height:<br>
  <input type="text" name="height"><br>
  <br>
  Weight:<br>
  <input type="text" name="weight"><br>
  <br>
  Hair Colour:<br>
  <select name="haircolour">
  <option value="black">Black</option>
  <option value="blonde">Blonde</option>
  <option value="brown">Brown</option>
  <option value="grey">Grey</option>
  <option value="red">Red</option>
  </select>
  <br>  
  <br>
  Distinctive Features:<br>
  <input type="text" name="distinctivefeatures"><br>
  <br>
  Languages Spoken:<br>
  <input type="text" name="languagesspoken"><br>
  <br> 
  <br> 
  <br>
  <input type="submit" value="Submit"><br>
  </div>
  </form>
  <div id="hiding_div2" style="display:none;"><br>
  <br><br><h1>Vehicle Details</h2><br>

<form action="/action_page.php" method="post">

  Type:<br>
  <select name="type" id="typevehicle">
  <option value="car">Car</option>
  <option value="van">Van</option>
  <option value="lorry">Lorry</option>
  <option value="motorbike">Motorbike</option> 
  <option value="boat">Boat</option>
  <option value="aeroplane">Aeroplane</option>
  </select><br>
  <br>
  Manufacturer:<br>
  <input type="text" name="manufacturer" id="manufacturervehicle"><br>
  <br>
  Model:<br>
  <input type="text" name="model" id="modelvehicle"><br>
  <br>
  Colour:<br>
  <select name="colour" id="colourvehicle">
  <option value="black">Black</option>
  <option value="blue">Blue</option>
  <option value="gold">Gold</option>
  <option value="green">Green</option> 
  <option value="grey">Grey</option>
  <option value="multicoloured">Multi Coloured</option>
  <option value="orange">Orange</option>
  <option value="pink">Pink</option>
  <option value="purple">Purple</option>
  <option value="silver">Silver</option>
  <option value="white">White</option>
  <option value="yellow">Yellow</option>
  <option value="red">Red</option>
  <option value="other">Other</option>
  </select><br>
  <br>
  Extras:<br>
  <select multiple name="extras" id="extrasvehicle">
  <option value="tintedwindows">Tinted Windows</option>
  <option value="spoilers">Spoliers</option> 
  <option value="winddeflectors">Wind Deflectors</option>
  <option value="mudflaps">Mudflaps</option>
  <option value="lowered">Lowered</option>
  <option value="customexhaust">Custom Exhaust</option>
  <option value="other">Other</option>
  </select><br>
  <br>
  Description:<br>
  <input type="text" name="description" id="descriptionvehicle"><br><br>


Damage:<br>
  <select name="form_select" onchange="showDiv(this)" id="vehicledamage">
   <option value="0">No</option>
   <option value="1">Yes</option>
</select>
<div id="hidden_div" style="display:none;"><br>
Location of Damage:
<p id="holdcontrol">Hold control to select more than one option</p>
<p>
<select multiple name="damage" id="damagearea">
<option value="standard">Front - Bumper</option>
<option value="prof">Front - Bonnet</option>
<option value="standard">Front - Driver door</option>
<option value="standard">Front - Passenger door</option>
<option value="standard">Rear - Bumper</option>
<option value="standard">Rear - Boot</option>
<option value="standard">Rear - Right</option>
<option value="standard">Rear - Left</option>
</select>
<p>
More about the damage:<br/>
<textarea name="comments" rows="7" cols="30" id="morevehicle"></textarea>
</p>

</div>
<script type="text/javascript">
function showDiv(select){
   if(select.value==1){
    document.getElementById('hidden_div').style.display = "block";
   } else{
    document.getElementById('hidden_div').style.display = "none";
   }
} 
</script>
</p>
</p>


  <br>
  Notes:<br>
  <input type="text" name="notes" id="notesvehicle"><br>
  <br>

<form enctype="multipart/form-data" method="post">
<p>
Photo: <br><br>
<input type="file" name='photo' id="photovehicle" />
</p>

</form>

</form>
  <br>
  <button type="button" class="btn btn-default target-button">Submit</button>
  </form><br><br>


  </div>


<script type="text/javascript">
function showDiv(select){
   if(select.value==1){
    document.getElementById('hiding_div').style.display = "block";
   } else if(select.value==2){
    document.getElementById('hiding_div2').style.display = "block";
   }
   else{
    document.getElementById('hiding_div').style.display = "none";
   }
} 
</script>

</form>

  Name:<br>
  <input type="text" name="name" id="myInput"><br>
  <br>
  Location:<br>
  <input type="text" name="address" id="locationtarget"><br>
  <br>
  Longitude<br>
  <input type="text" name="longitude" id="longitudetarget"><br>
  <br>
  Latitude<br>
  <input type="text" name="latitutde" id="latitudetarget"><br>
  <br>
  Description:<br>
  <input type="text" name="descriptionform" id="descriptiontarget"><br>
  <br>

</form>
    </div>

Answer 1

你只需要确保不会同时显示hidden_​​div和hiding_div2。

function showDiv(select){
       if(select.value==1){
        // in case vehicle was already selected before, you need to hide hiding_div2
        document.getElementById('hiding_div').style.display = "block";
        document.getElementById('hiding_div2').style.display = "none";

       } else if(select.value==2){
        document.getElementById('hiding_div').style.display = "none";
        document.getElementById('hiding_div2').style.display = "block";
       }
       else{
        document.getElementById('hiding_div').style.display = "none";
        document.getElementById('hiding_div2').style.display = "none";
       }
    }

如果这不是你的意思，请告诉我，我会编辑。