Question

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

隐藏div s＆＃39; sbdomainSubGroup＆＃39;和＆＃s; sbdomainSubGroups＆＃39;页面重新加载后如果没有从下拉列表中选择任何值＆＃39; sbdomain＆＃39;。

显示div＆＃39; sbdomainSubGroup＆＃39;如果＆＃34;是＆＃34;从下拉菜单中选择＆＃39; sbdomain＆＃39;何时重新加载页面。另外，要保留text字段＆＃39; business＆＃39;值。

显示div＆＃39; sbdomainSubGroups＆＃39;如果＆＃34;否＆＃34;从下拉菜单中选择＆＃39; sbdomain＆＃39;何时重新加载页面。同时保留text字段＆＃39; business2＆＃39;值。

我知道可以使用localStorage或cookies来实现此目的，但我是JavaScript / JQuery的新手。

如果我能坚持使用JavaScript来完成这项工作，那就太棒了。

＆＃13;

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");
}

＆＃13;

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

＆＃13;

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>

＆＃13;

Answer 1

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

在该功能中，检查用户选择的值。根据所选值，将className隐藏/显示为div sbdomainSubGroup / sbdomainSubGroups。

希望这会有所帮助!!

Answer 2

您可以执行以下操作：

查看：

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

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

2 个答案: