How to prevent the default value for an HTML <select> element from changing when the user leaves the screen

Question

I have a web-page which contains two tabs. The first tab contains a drop down search bar which contains the list of branch codes and a default "select the branch code"(which btw is an disabled option) as options.

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

When the user selects a branch code and leaves to the second tab of the same page and comes back to the first tab I want the first tab to show the default disabled option. (i.e "select the branch code") But instead it shows the previously selected branch code in the text area of that drop down bar.

I tried calling a JS function through onload() in the body tag. I planned to store the default selected value of the drop down bar as soon as the page loads and before the user can change it. And then when the user clicks on the next tab I thought I could use Onclick() function and store the value returned to default and set it to the textContent of document.getElementById("dropdown").value =defaultvalue; . But it didn't work fully. But all this command does is change the value of the search drop down bar but the actual letters remain same. (i.e the value part of the is restored to the original disabled ) but the text area displaying the search items in the bar still shows the latest search done by the user.( if the value the user selects is '101' and leaves the tab , when he comes back to the first tab and it should show 'select the branch code' in the text box area of the drop down. Instead even though the actual value of the element is changed, it still shows 101 in the text area.

I tried even .innerText and .textcontent in the place of .value() in javascript. But still the values in the back-end changes (when i put it in console.log, it correctly prints the stored default value). However the main text area of the drop down bar still shows the branch code which the the user searched previously.

The problem here is though the value of the element changes almost with all commands above, the text area in the drop down bar still displays the old , previously searched item. So is there a way where I can make the so that not only the value but also the actual text-content of that particular tag gets the default value. for those who have asked have given the detailed coding of the tabs and the function where I intend to do this. I have used Bootstrap for it

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

sample with "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>