堆棧內存溢出
  簡體   English   中英

如果在上一個下拉菜單中進行了某些選擇，則顯示/隱藏下拉菜單

[英]Show/hide drop down if a certain selection is made in previous drop down

 原文  2011-07-27 16:56:08  6   2    javascript

問題描述

我有一個表格。 我想根據單選按鈕的選擇禁用或啟用下拉菜單。 我需要在表單中多次執行此操作。 我是Java語言的新手，所以我真的不知道從哪里開始。 這是表格的一部分： 

<p id="hospitalorientation"><label>Hospital Orientation:</label>
<div id='buttons'>
 <label><input type="radio" name="hospital" /> Not Complete </label>
<label><input type="radio" name="hospital" /> Complete </label>
</div>
<div id="list1" style="display: none;">
 <label>Month Complete: 
<select>
  <option>January</option>
  <option>February</option>
    <option>March</option>
    <option>April</option>
    <option>May</option>
    <option>June</option>
    <option>July</option>
    <option>August</option>
    <option>September</option>
    <option>October</option>
    <option>November</option>
    <option>December</option>
</select>
</label>
</div>

然后我基本上以表格的形式有幾個副本。 

<p id="ppd"><label>PPD:</label>
<div id='buttons'>
<label><input type="radio" name="ppd" /> Not Complete </label>
<label><input type="radio" name="ppd" /> Complete </label>
</div>
<div id="list2" style="display: none;">
  <label>Month Complete: 
    <select>
      <option>January</option>
      <option>February</option>
      <option>March</option>
      <option>April</option>
      <option>May</option>
    <option>June</option>
    <option>July</option>
    <option>August</option>
    <option>September</option>
    <option>October</option>
    <option>November</option>
    <option>December</option>
</select>

現在我真的不知道從那里去。

2 個解決方案

解決方案1
 0  2011-07-27 17:04:54

您需要為您的單選框提供值，並添加它們的ID，例如“ rButtonOne”和“ rButtonTwo” 

<input type="radio" id="rButtonOne" onclick="clicked(this);" value="0">
<input type="radio" id="rButtonTwo" onclick="clicked(this);" value="1">

然后用javascript 

function clicked(obj)
{
   if(obj.value == "1")
      document.getElementById('id_of_select_box').disabled = 'disabled';
   else if (obj.value == "0")
      document.getElementById('id_of_select_box').disabled = '';
}

這是方法。

解決方案2
 0  2011-07-27 17:13:20

HTML 

<p id="hospitalorientation"><label>Hospital Orientation:</label>
<div id='buttons'>
 <label><input id="radio1" type="radio" name="hospital" /> Not Complete </label>
<label><input id="radio2" type="radio" name="hospital" /> Complete </label>
</div>
<div id="list1" style="display: none;">
 <label>Month Complete:
<select>
  <option>January</option>
  <option>February</option>
    <option>March</option>
    <option>April</option>
    <option>May</option>
    <option>June</option>
    <option>July</option>
    <option>August</option>
    <option>September</option>
    <option>October</option>
    <option>November</option>
    <option>December</option>
</select>
</label>
</div>

Javascript： 

document.getElementById("radio1").onchange = function(){
    if(this.checked == true){
        document.getElementById("list1").style.visibility = "hidden";
        document.getElementById("list1").style.display = "none";
    }
};

document.getElementById("radio2").onchange = function(){
    if(this.checked == true){
        document.getElementById("list1").style.visibility = "visible";
        document.getElementById("list1").style.display = "block";
    }
};

工作示例： http : //jsfiddle.net/aSxXA/

這是一個更新，這是一個完整的html頁面，請注意body onload事件如何注冊eventHandlers，我認為當您嘗試注冊它們之前，文檔可能尚未加載 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <script type=text/javascript>
            function registerEventHandlers()
            {
            document.getElementById("radio1").onchange = function(){
                hideDiv(this,"list1")
            };
            document.getElementById("radio2").onchange = function(){
                showDiv(this,"list1")
            };
            document.getElementById("radio3").onchange = function(){
                hideDiv(this,"list2")
            };
            document.getElementById("radio4").onchange = function(){
                showDiv(this,"list2")
            };              
            }

            function showDiv(targetElement,toggleElementId){
                    if (targetElement.checked == true) {
                        document.getElementById(toggleElementId).style.visibility = "visible";
                        document.getElementById(toggleElementId).style.display = "block";
                    }                
            }
            function hideDiv(targetElement,toggleElementId){
                    if (targetElement.checked == true) {
                        document.getElementById(toggleElementId).style.visibility = "hidden";
                        document.getElementById(toggleElementId).style.display = "none";
                    }                
            }
        </script>
    </head>
    <body onload="registerEventHandlers();">
        <p id="hospitalorientation">
            <label>
                Hospital Orientation:
            </label>
            <div id='buttons'>
                <label>
                    <input id="radio1" type="radio" name="hospital" /> Not Complete 
                </label>
                <label>
                    <input id="radio2" type="radio" name="hospital" /> Complete 
                </label>
            </div>
            <div id="list1" style="display: none;">
                <label>
                    Month Complete: 
                    <select>
                        <option>January</option>
                        <option>February</option>
                        <option>March</option>
                        <option>April</option>
                        <option>May</option>
                        <option>June</option>
                        <option>July</option>
                        <option>August</option>
                        <option>September</option>
                        <option>October</option>
                        <option>November</option>
                        <option>December</option>
                    </select>
                </label>
            </div>
            <p id="ppd">
                <label>
                    PPD:
                </label>
                <div id='buttons'>
                    <label>
                        <input id="radio3" type="radio" name="ppd" /> Not Complete 
                    </label>
                    <label>
                        <input id="radio4" type="radio" name="ppd" /> Complete 
                    </label>
                </div>
                <div id="list2" style="display: none;">
                    <label>
                    Month Complete: 
                    <select>
                        <option>January</option>
                        <option>February</option>
                        <option>March</option>
                        <option>April</option>
                        <option>May</option>
                        <option>June</option>
                        <option>July</option>
                        <option>August</option>
                        <option>September</option>
                        <option>October</option>
                        <option>November</option>
                        <option>December</option>
                    </select>
                    </body>
                </html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 從選擇下拉菜單中顯示/隱藏DIV 顯示/隱藏下拉菜單 根據下拉菜單中的選擇顯示/隱藏表單字段 如何在選擇任何下拉值時顯示/隱藏 DIV？ 如何根據下拉選擇隱藏和顯示內容 如何顯示/隱藏基於角度的下拉選擇的div？ 使用JQuery根據下拉選擇隱藏和顯示div 我希望從另一個下拉選擇中顯示和隱藏1或2個下拉菜單 從未來的下拉選項中刪除先前的下拉選項 基於選擇另一個下拉列表顯示/隱藏下拉列表
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM