javascript - 从选择下拉列表中隐藏/显示标签和段落

Question

我试图隐藏我的 gvw 标签和 <p>之后我只希望它在选择卡车时显示。有人可以帮助我并向我解释如何使用此代码执行此操作吗？问题是它们的位置，否则使用 jQuery 可能会更容易:/

http://jsfiddle.net/1xqbpLp1/

 function GVW(){
   var dropdown1 = document.getElementById('vehiclebody');
   var textbox = document.getElementById('gvw');
   // Array for storing whether the textbox is required
   var is_required = [false, false, false, false, true, false];
     
   if(is_required[dropdown1.selectedIndex]) {
       textbox.required = true;
       textbox.style.display = "inline-block";
   } else {
       textbox.value = "";
       textbox.required = false;
       textbox.style.display = "none";  
   }

 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select name="vehiclebody" id="vehiclebody" required="yes" message="Please select body." size="1"  onChange="GVW();">
    <option value="">Choose a Vehicle</option>
    <option value="0">2Dr</option>
    <option value="1">Pickup</option>
    <option value="2">4dr</option>
    <option value="3">Truck</option>
    <option value="4">Convertible</option>
    <option value="5">Van</option>
</select>


<label for="ew">Empty Weight:</label>
         <input type="text" name="ew" id="ew" validateat="onSubmit" validate="noblanks" required="yes" message="Please enter empty weight." value="">
         
         <label for="gvw">&nbsp;&nbsp;&nbsp;Gross Vehicle Weight:*</label>
         <input type="text" name="gvw" id="gvw" onfocus="this.select()" required="yes" message="Please enter gross vehicle weight." value="" style="display:none;">
         
         </p>  
         </div>
         
         <p>*Gross Vehicle Weight is required for heavy trucks over 5000 lbs. Visit our website for more information.&nbsp;<a href="http://www.taxcollector.com/services_vehicle_heavy_truck.asp" target="_blank">Heavy Truck Information and Fee Schedule based on GVW</a> </p>

Answer 1

您需要使用 CSS 来最初隐藏元素:

<p id="gvwInfo" style="display:none">

然后使用 JavaScript 根据选择显示/隐藏它们。这是一个有效的 jsfiddle:http://jsfiddle.net/kgajera/1xqbpLp1/1/