如何防止HTML的默认值 <select>用户离开屏幕时更改的元素

Question

我有一个包含两个选项卡的网页。 第一个选项卡包含一个下拉搜索栏，其中包含分支代码列表和默认的“选择分支代码”（btw是禁用选项）作为选项。

<select id="dropdown">
  <option value="mech">101</option>
  <option value="cse">201</option>
  <option value="ece">4301</option>
  <option value="Select" selected disabled="disabled">select the branch code</option>
</select>

当用户选择一个分支代码并转到同一页面的第二个选项卡并返回第一个选项卡时，我希望第一个选项卡显示默认的禁用选项。 （即“选择分支代码”），而是在该下拉栏的文本区域中显示先前选择的分支代码。

我尝试通过body标签中的onload()调用JS函数。 我计划在页面加载后立即存储下拉菜单的默认选定值，然后用户才能对其进行更改。 然后，当用户单击下一个选项卡时，我想我可以使用Onclick()函数并将返回的值存储为default ，并将其设置为document.getElementById("dropdown").value =defaultvalue; 。 但是它没有完全起作用。 但是此命令所做的只是更改搜索下拉栏的值，但实际字母保持不变。 （即的value部分恢复为原来的禁用状态），但在栏中显示搜索项的文本区域仍显示用户最近进行的搜索。（如果用户选择的值是“ 101”并离开标签页，当他返回到第一个标签时，在下拉菜单的文本框中应显示“ select the branch code”（选择分支代码），尽管该元素的实际值已更改，但在文本区域中仍显示101。

我甚.innerText在JavaScript中尝试使用.innerText和.textcontent代替.value() 。 但是后端中的值仍然会更改（当我将其放在console.log中时，它会正确打印存储的default value ）。 但是，下拉栏的主要文本区域仍显示用户先前搜索的分支代码。

这里的问题是，尽管元素的值几乎随上面的所有命令而改变，但下拉栏中的文本区域仍显示以前搜索过的旧项目。 因此，有一种方法可以使之成为默认值，不仅该值而且该特定标签的实际文本内容也都可以。 对于那些要求给出选项卡的详细编码以及我打算执行此功能的人员。 我已经用了Bootstrap

<nav class="nav nav-tabs"> 
            <a data-toggle="tab" class="nav-item nav-link active" href="#GLP" style="font-size:12px" onclick=RemoveDataFromUpdate()>Generate  POD</a> <!-- title of both the tabs, I use bootstrap to make this possible -->
            <a data-toggle="tab" class="nav-item nav-link " href="#UBP" style="font-size:12px" onclick = RemoveDataFromGenerate()>Update  POD</a>
        </nav>  

        <div class="tab-content">



            <!-- TAB 1 : GENERATE POD -->

            <div class="GeneratePOD tab-pane fade show active" id="GLP" > 
                <span style="color:blue">Branch Code </span><span class="required">*</span> 
              <%
                        try {
                            Connection connection
                                    = DriverManager.getConnection("jdbc:sqlserver://192.170.19.8:1533;databaseName=ash;user=ash;password=ash");

                            Statement statement = connection.createStatement();

                            resultset = statement.executeQuery("SELECT Branch_Code FROM tb_Branch;");
                    %>
                    <select class="js-example-basic-single" id="selement" name="search" style="font-size : 13px"> <!-- this is the select where I will be needing the display where the default value needs to be there -->
                        <option value="Select a Branch code" selected disabled="disabled"> Select a Branch code </option> <!-- the default value which needs to be present each time the user loads this first tab  -->
               <%  while (resultset.next()) {%>
                        <option value="<%= resultset.getString(1)%>"><%= resultset.getString(1)%></option>
                        <% }%>
                    </select>
                    <%
                        } catch (Exception e) {
                            out.println("wrong entry" + e);
                        }
                    %>
                <span class="button"><button class="btn btn-primary" id="search" onclick= "Search()">Search</button></span> <!-- search button -->
                <br /><br /> <!-- line break -->
                <div class='dispatch-info' id="tdiv" style="border:none">
                </div>
                <div id="del" style="visibility:hidden">
                    <span style="color:blue">Delivery Agent </span><span class="required">*</span> 
                    <%
                        try {
                            Connection connection
                                    = DriverManager.getConnection("jdbc:sqlserver:// 192.170.19.8:1533;databaseName=ash;user=ash;password=ash");

                            Statement statement = connection.createStatement();

                            resultset = statement.executeQuery("select Agent_name from delivery");
                    %>
                    <select class="form-control " id="del_agent" name="del">

                        <%  while (resultset.next()) {%>
                        <option><%= resultset.getString(1)%></option>
                        <% }%>
                    </select>
                    <%
                        } catch (Exception e) {
                            out.println("wrong entry" + e);
                        }
                    %>
                    <span class="button"><button class="btn btn-primary" style="font-weight:bold" onclick="Generate_POD()">Generate Internal POD</button></span><!-- generate button-->
                </div>
            </div>

            <!-- END TAB 1 : GENERATE  POD -->

            <!-- TAB 2 : UPDATE POD -->
            <div class="GeneratePOD tab-pane fade" id="UBP"style="font-size:0.875em">  

           <div id="dropdown" style="border:none"></div>

            </div>                 </div> 

    <script> <!-- this is place where I tend to do the function, each time the user clicks the Update tab it gets redirected here and here is where I plan to make the default value appear.-->
function RemoveDataFromGenerate()
            {
              $('#tdiv').empty(); //just a div for a tble 
              document.getElementById("del").style.visibility = "hidden";
             let a=document.getElementById("selement").innerHTML=defaultvalue;
              let b= document.getElementById("selement").textContent;
              let c= document.getElementById("selement").innerText;
              console.log("the value of that search bar is "+a+" while the actual text content of that text search bar is "+b);
console.log("the selected value is "+ document.getElementById("selement").value);
</script>```

Answer 1

juste selectedIndex吗？

 window.onload=_=>{ dropdown.selectedIndex = 3 } SetDefault.onclick=_=>{ dropdown.selectedIndex = 3 } 

 <select id="dropdown"> <option value="mech">101</option> <option value="cse">201</option> <option value="ece">4301</option> <option value="Select" selected disabled="disabled">select the branch code</option> </select> <button id="SetDefault"> Set Default</button> 

带有“ TAB”的样本...

 window.onload=_=>{ dropdown.selectedIndex = 3 } tab1.onclick=_=>{ dropdown.selectedIndex = 3; } 

 .tabset > input[type="radio"] { position: absolute; left: -200vw; } .tabset .tab-panel { display: none; } .tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child, .tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2), .tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3), .tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4), .tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5), .tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) { display: block; } /* Styling */ body { font: 16px/1.5em "Overpass", "Open Sans", Helvetica, sans-serif; color: #333; font-weight: 300; } .tabset > label { position: relative; display: inline-block; padding: 15px 15px 25px; border: 1px solid transparent; border-bottom: 0; cursor: pointer; font-weight: 600; } .tabset > label::after { content: ""; position: absolute; left: 15px; bottom: 10px; width: 22px; height: 4px; background: #8d8d8d; } .tabset > label:hover, .tabset > input:focus + label { color: #06c; } .tabset > label:hover::after, .tabset > input:focus + label::after, .tabset > input:checked + label::after { background: #06c; } .tabset > input:checked + label { border-color: #ccc; border-bottom: 1px solid #fff; margin-bottom: -1px; } .tab-panel { padding: 30px 0; border-top: 1px solid #ccc; } /* Demo purposes only */ *, *:before, *:after { box-sizing: border-box; } body { padding: 30px; } .tabset { max-width: 65em; } 

 <div class="tabset"> <!-- Tab 1 --> <input type="radio" name="tabset" id="tab1" checked> <label for="tab1">Select</label> <!-- Tab 2 --> <input type="radio" name="tabset" id="tab2"> <label for="tab2">input text</label> <!-- Tab 3 --> <input type="radio" name="tabset" id="tab3"> <label for="tab3">something</label> <div class="tab-panels"> <section id="foo_1" class="tab-panel"> <h2>Select</h2> <p> <select id="dropdown"> <option value="mech">101</option> <option value="cse">201</option> <option value="ece">4301</option> <option value="Select" selected disabled="disabled">select the branch code</option> </select> </p> </section> <section id="foo_2" class="tab-panel"> <h2>input_text</h2> <p> <textarea name="bob" id="bob" cols="30" rows="10"></textarea> </p> </section> <section id="foo_3" class="tab-panel"> <h2>something</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut congue felis ac porttitor elementum. Vivamus auctor semper mollis. Etiam ac nibh nulla. Etiam cursus malesuada ante, et cursus risus pellentesque et. Proin ligula orci, placerat eu lobortis eu, pretium nec ex. Phasellus rutrum mauris nisl, a placerat lacus tempus a. Morbi consequat, felis ut sodales mollis, ante elit mollis felis, vitae volutpat lorem erat at orci. Etiam porta quam nec blandit faucibus. Quisque finibus enim a tincidunt posuere. Nullam porta odio nec nibh volutpat, quis efficitur nulla iaculis. Phasellus dictum porttitor tellus eget bibendum. Donec faucibus, felis scelerisque tempus sagittis, ligula ligula pellentesque nisl, eu consectetur nisi sapien sit amet enim. Sed diam mi, tempus vel faucibus tempus, pulvinar quis neque. Cras vulputate lacus nibh. </p> <p> tab system from : https://codepen.io/markcaron/pen/MvGRYV </p> </section> </div> </div>