我需要修改腳本來隱藏和顯示的div

隱藏div S「sbdomainSubGroup」和頁面重載之後「sbdomainSubGroups」如果沒有值從下拉列表中選擇'sbdomain'。

顯示div'sbdomainSubGroup'如果在重新加載頁面時從下拉'sbdomain'中選擇「是」。另外，要保留text字段'業務'的價值。

顯示div'sbdomainSubGroups'如果在重新加載頁面時從下拉'sbdomain'中選擇「否」。還要保留text字段'business2'的值。

我知道，localStorage或cookies可以用來實現這一點，但我是JavaScript/JQuery的新手。

如果我可以堅持使用JavaScript來完成這項工作，那將會很棒。

window.onload = showHide; 
 

 
function showHide(){ 
 
    var el = document.getElementById("sbdomain"); 
 
    var selectedVal = el.options[el.selectedIndex].value; 
 
    var subGroupEl = document.getElementById("SubGroup").getElementsByTagName("div"); 
 
\t var subGroupFl = document.getElementById("SubGroups").getElementsByTagName("div"); 
 
    for(var i=0; i<subGroupEl.length; i++){ 
 
     subGroupEl[i].className = "hidden"; 
 
\t \t subGroupFl[i].className = "hidden"; 
 
    } 
 
    if(document.getElementById(selectedVal)) 
 
     document.getElementById(selectedVal).className = "visible"; 
 
    
 
     
 
    else 
 
     console.log("No Sub Groups present for this option"); 
 
} 
 

 
\t

.hidden{display: none;} 
 
.visible{display: block;}

Is this to be a subdomain? 
 
<select id="sbdomain" name="sbdomain"> 
 
<option disabled selected>Please Select</option> 
 
    <option value="sbdomainSubGroup">Yes</option> 
 
    <option value="sbdomainSubGroups">No</option> 
 
</select> 
 

 
<div id="SubGroup"> 
 
<div id="sbdomainSubGroup" name="sbdomainSubGroup"> 
 
    <label id="subdomain">Enter Subdomain</label> 
 
    <input type='text' class='text' name='business' size='20'/> 
 
    <br /> 
 
    
 
</div> 
 
</div> 
 

 
<div id="SubGroups"> 
 
<div id="sbdomainSubGroups" name="sbdomainSubGroups"> 
 
    <label id="subdomainno">Enter Domain</label> 
 
    <input type='text' class='text' name='business2' size='20'/> 
 
    <br /> 
 
    
 
</div> 
 
</div>

來源

2017-06-21 saco

在你降降變化值調用JavaScript函數。

在那個函數中檢查用戶選擇了什麼值。根據選定的值分別爲div sbdomainSubGroup/sbdomainSubGroups設置您的className hidden/visible。

希望這有助於！

來源

2017-06-21 18:29:57

你可以做到以下幾點：

查看：

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Index777</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <style type="text/css"> 
     .hidden { 
      display: none; 
     } 

     .visible { 
      display: block; 
     } 
    </style> 
    <script type="text/javascript"> 
     $(function() { 
      window.onload = showHide; 

      function showHide() { 
       //Hide divs sbdomainSubGroup and sbdomainSubGroups after page reload if no value 
       //is selected from dropdown sbdomain. 
       if ($("#sbdomain option:selected").text() == "Please Select") { 
        $("#sbdomainSubGroup").addClass("hidden"); 
        $("#sbdomainSubGroups").addClass("hidden"); 
       } 
       else { 
        $("#sbdomainSubGroup").removeClass("hidden"); 
        $("#sbdomainSubGroups").removeClass("hidden"); 
       } 

       //Show div sbdomainSubGroup if "Yes" is selected from dropdown sbdomain when page is 
       //reloaded. Also to retain textfield business value. 
       if ($("#sbdomain option:selected").text() == "Yes") { 
        $("#sbdomainSubGroup").removeClass("hidden"); 
        $("#sbdomainSubGroups").addClass("hidden"); 
       } 

       //Show div sbdomainSubGroups if "No" is selected from dropdown sbdomain when page is 
       //reloaded. Also to retain textfield business2 value. 
       if ($("#sbdomain option:selected").text() == "No") { 
        $("#sbdomainSubGroups").removeClass("hidden"); 
        $("#sbdomainSubGroup").addClass("hidden"); 
       } 
      } 
      //this represents a page reload 
      $("#reload").click(function() { 
       showHide(); 
      }) 
     }) 
    </script> 

</head> 
<body> 
    Is this to be a subdomain? 
    <select id="sbdomain" name="sbdomain"> 
     <option selected>Please Select</option> 
     <option value="sbdomainSubGroup">Yes</option> 
     <option value="sbdomainSubGroups">No</option> 
    </select> 

    <div id="SubGroup"> 
     <div id="sbdomainSubGroup" name="sbdomainSubGroup"> 
      <label id="subdomain">Enter Subdomain</label> 
      <input type='text' class='text' name='business' size='20' /> 
      <br /> 

     </div> 
    </div> 

    <div id="SubGroups"> 
     <div id="sbdomainSubGroups" name="sbdomainSubGroups"> 
      <label id="subdomainno">Enter Domain</label> 
      <input type='text' class='text' name='business2' size='20' /> 
      <br /> 

     </div> 
    </div> 
    <input type="button" value="BtnRepresentsPageReload" id="reload" /> 
</body> 
</html>

來源

2017-06-21 18:50:28 kblau

@saco https://jsfiddle.net/kblau237/05fpzx5t/2/ – kblau

我需要修改腳本來隱藏和顯示的div

回答

相關問題