我需要修改脚本以隐藏和显示div

我需要修改脚本才能执行以下操作：

如果从下拉列表中"sbdomain"中选择的值，则在页面重新加载后隐藏div"sbdomainSubGroup"和"sbdomainSubGroups"。

如果重新加载页面时从"sbdomain"下拉列表中选择了"是"，则显示div"sbdomainSubGroup"。此外，保留text字段"业务"价值。

如果在重新加载页面时从"sbdomain"下拉列表中选择了"否"，则显示div"sbdomain子组"。还保留text字段"业务2"值。

我知道可以使用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");
	var subGroupFl = document.getElementById("SubGroups").getElementsByTagName("div");
    for(var i=0; i<subGroupEl.length; i++){
        subGroupEl[i].className = "hidden";
		subGroupFl[i].className = "hidden";
    }
    if(document.getElementById(selectedVal))
        document.getElementById(selectedVal).className = "visible";
 
        
    else
        console.log("No Sub Groups present for this option");
}

.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>

在下拉值更改时调用 JavaScript 函数。

在该函数中，检查用户选择的值。根据所选值，分别对div sbdomainSubGroup/sbdomainSubGroups 设置您的类名隐藏/可见。

希望这有帮助！！

您可以执行以下操作：

视图：

<!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>

相关内容

最新更新

热门标签：