Question

我正在尝试在HTML和JavaScript中执行以下操作：

我正在使用Select标签（HTML），该标签将被隐藏，直到用户点击否。如果用户单击“否”，则会显示“选择”选项，如果用户选择“是”，则“选择”选项将消失。此函数适用于输入和其他标记，但不适用于选择标记。

我做了很多研究，我发现display：none和select标签不适用于Google Chrome和IE，但所有解决方案都是在JQuery和ASP.net中提供的。由于我还不熟悉所有这些，我想知道是否有使用HTML和JavaScript的解决方案？

代码HTML：

    <div id="divMetSpec" class="fieldRow">
     <div class="leftLabel labelWidth20">
        <label for="">Met Spec Upon Return:</label>
     </div>
     <div class="leftField">
      <div class="formField68">
        <input id="rbMetSpec" name="rbMetSpec" type="radio" 
        class="radiobuttonfield" alt="Met Spec" title="Met Spec" value="Yes"
        onclick="javascript:KitFailure();" />Yes
        <input id="rbMetSpec1" name="rbMetSpec" type="radio" 
        class="radiobuttonfield" alt="Met Spec" title="Met Spec" value="No" 
        onclick="javascript:KitFailure();" />No
       </div>
      </div>
     </div>

   <div id="KitFailure" style="display:none">
    <p class="indent">To select multiple options - Please hold down the Ctrl 
    button to select:</p>

     <div class="leftLabel labelWidth20">
        <label for="txtKitFailure">Specify Failure:</label>
     </div>    
     <div class="leftField">
      <div class="formField40">
        <select id="txtKitFailure" type="text" class="fieldRow" 
        name="KitFailure" multiple size="5">
            <option value="Failure1">Failure 1</option>
            <option value="Failure2">Failure 2</option>
            <option value="Failure3">Failure 3</option>
            <option value="Failure4">Failure 4</option>
            <option value="Failure5">Failure 5</option>
            <option value="Failure6">Failure 6</option>
            <option value="Failure7">Failure 7</option>
            <option value="Failure8">Failure 8</option>
         </select>
       </div>
      </div> 
     </div>

代码JavaScript：

  function KitFailure() {
     if (document.getElementById('rbMetSpec1').checked)  {

       document.getElementById('KitFailure').style.display = 'none';

      } else  document.getElementById('KitFailure').style.display = 'block';

     }

提前感谢您的帮助。

艾琳

Answer 1

它适用于IE11 +仿真，FF，Chrome和Safari for Windows。一些更正：
type="text"不是select的有效属性还可以使用multiple="multiple"

Alt不是input

的有效属性

如何取消隐藏选择标记HTML？

1 个答案: