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

Question

我有一个包含两个选项卡的网页。第一个选项卡包含一个下拉搜索栏，其中包含分支代码列表和默认的“选择分支代码”（btw是禁用选项）作为选项。    101    201    4301   选择分支代码 当用户选择一个分支代码并转到同一页面的第二个选项卡并返回第一个选项卡时，我希望第一个选项卡显示默认的禁用选项。 （即“选择分支代码”），而是在该下拉栏的文本区域中显示先前选择的分支代码。 我尝试通过body标签中的onload（）调用JS函数。我计划在页面加载后立即存储下拉菜单的默认选定值，然后用户才能对其进行更改。然后，当用户单击下一个选项卡时，我想我可以使用Onclick（）函数并将返回的值存储为默认值，并将其设置为document.getElementById（“ dropdown”）。text = defaultvalue;的textContent。 。但是它没有完全起作用。但是此命令所做的只是更改搜索下拉栏的值，但实际字母保持不变。 （即的值部分恢复为原来的禁用状态），但在栏中显示搜索项的文本区域仍显示用户最近进行的搜索。（如果用户选择的值是“ 101”并离开标签页，当他返回到第一个标签时，在下拉菜单的文本框中应显示“ select the branch code”（选择分支代码），尽管该元素的实际值已更改，但在文本区域中仍显示101。 我甚至在JavaScript中尝试使用.innerText和.textcontent代替.value（）。但是后端中的值仍然会更改（当我将其放在console.log中时，它会正确打印存储的默认值）。但是，下拉栏的主要文本区域仍显示用户先前搜索的分支代码。 这里的问题是，尽管元素的值几乎随上面的所有命令而改变，但下拉栏中的文本区域仍显示以前搜索过的旧项目。因此，有一种方法可以使之成为默认值，不仅该值而且该特定标签的实际文本内容也都可以。对于那些要求给出选项卡的详细编码以及我打算执行此功能的人员。我已经用了Bootstrap

            生成POD <！- -两个标签的标题，我都使用引导程序来实现->             更新POD         

        

            <！-选项卡1：生成POD->             

                分支代码 *               <％                         尝试{                             连接连接                                     = DriverManager.getConnection（“ jdbc：sqlserver：//192.170.19.8：1533; databaseName = ash; user = ash; password = ash”）;                             语句语句= connection.createStatement（）;                             resultset = statement.executeQuery（“从tb_Branch; SELECT分支代码”;）;                     ％>                      <！-这是我需要在其中显示的选择默认值必须存在->                         选择一个分支代码 <！-每次用户加载第一个选项卡时都需要显示的默认值->                <％while（resultset.next（））{％>                         ”> <％= resultset.getString（1）％>                         <％}％>                                          <％                         } catch（Exception e）{                             out.println（“错误条目” + e）;                         }                     ％>                  搜索 <！-搜索按钮->                 

<！-换行符->                 

                

                

                    送货员 *                     <％                         尝试{                             连接连接                                     = DriverManager.getConnection（“ jdbc：sqlserver：// 192.170.19.8:1533;databaseName=ash;user=ash;password=ash”）;                             语句语句= connection.createStatement（）;                             resultset = statement.executeQuery（“从交付中选择Agent_name”）；                     ％>                                              <％while（resultset.next（））{％>                          <％= resultset.getString（1）％>                         <％}％>                                          <％                         } catch（Exception e）{                             out.println（“错误条目” + e）;                         }                     ％>                      生成内部POD <！-生成按钮->                 

            

            <！-结束选项卡1：生成POD->             <！-选项卡2：更新POD->             

           

            

    <脚本> <！-这是我倾向于执行此功能的地方，每次用户单击“更新”选项卡时，它都会在此处重定向，这是我计划在其中显示默认值的地方。--> 函数RemoveDataFromGenerate（）             {               $（'＃tdiv'）。empty（）; //只是一个div               document.getElementById（“ del”）。style.visibility =“隐藏”;              让a = document.getElementById（“ selement”）。innerHTML = defaultvalue;               让b = document.getElementById（“ selement”）。textContent;               让c = document.getElementById（“ selement”）。innerText;               console.log（“该搜索栏的值为” + a +“，而该文本搜索栏的实际文本内容为” + b）； console.log（“所选值为” + document.getElementById（“ selement”）。value）; ```

Answer 1

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