Jquery selectors work only for the first time in the dropdown list

Question

My objective is to select the last option of all drop down boxes in a page (Every thing goes right but when I try to run my code second time the results do not change)I tried to log the jquery selector code but didn't understand the result I don't know why does my code works for the first time only.Here is my code:

$(document).ready(function() {
  $("#btn1").click(function() {
    $("select option:last-child").attr("selected", "selected"); //Select the last drop down list option of each drop down list.
    setTimeout(function() {
      alert("Done!");
    }, 10)
  });
});

//Style of my button.
.myButton {
  -moz-box-shadow: inset 0px 1px 0px 0px #54a3f7;
  -webkit-box-shadow: inset 0px 1px 0px 0px #54a3f7;
  box-shadow: inset 0px 1px 0px 0px #54a3f7;
  background-color: #007dc1;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #124d77;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 15px;
  padding: 10px 9px;
  text-decoration: none;
}

.myButton:hover {
  background-color: #0061a7;
}

.myButton:active {
  position: relative;
  top: 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <select>
      <option id="a1" value="cars">Select Car</option>
      <option id="a2" value="volvo">Volvo</option>
      <option id="a3" value="mercedes">Mercedes</option>
      <option id="a4" value="audi">Audi</option>
    </select>
  </tr>
  <tr>
    <select>
      <option id="b1" value="nationality">Select Nationality</option>
      <option id="b2" value="lebanese">Lebanese</option>
      <option id="b3" value="chinese">Chinese</option>
      <option id="b4" value="egyption">Egyption</option>
    </select>
  </tr>
  <tr>
    <select>
      <option id="c1" value="color">Select Color</option>
      <option id="c2" value="red">Red</option>
      <option id="c3" value="yellow">Yellow</option>
      <option id="c4" value="green">Green</option>
    </select>
  </tr>
  <tr>
    <select>
      <option id="d1" value="computers">Select Computer</option>
      <option id="d2" value="hp">Hp</option>
      <option id="d3" value="acer">Acer</option>
      <option id="d4" value="toshiba">Toshiba</option>
    </select>
  </tr>
  <tr>
    <button id="btn1" class="myButton">Select Last Value</button>
  </tr>
</table>

This code just gives me the results for the first time but after the second time something goes wrong.What is it?

Answer 1

You're setting an attribute for the option, but I guess you should change the <select> instead.

$(document).ready(function() {
  $("#btn1").click(function() {
    //Select the last drop down list option of each drop down list.
    $("select").each(function() {
      this.selectedIndex = this.length - 1;
    });
  });
});

//Style of my button.
.myButton {
  -moz-box-shadow: inset 0px 1px 0px 0px #54a3f7;
  -webkit-box-shadow: inset 0px 1px 0px 0px #54a3f7;
  box-shadow: inset 0px 1px 0px 0px #54a3f7;
  background-color: #007dc1;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #124d77;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 15px;
  padding: 10px 9px;
  text-decoration: none;
}

.myButton:hover {
  background-color: #0061a7;
}

.myButton:active {
  position: relative;
  top: 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <select>
      <option id="a1" value="cars">Select Car</option>
      <option id="a2" value="volvo">Volvo</option>
      <option id="a3" value="mercedes">Mercedes</option>
      <option id="a4" value="audi">Audi</option>
    </select>
  </tr>
  <tr>
    <select>
      <option id="b1" value="nationality">Select Nationality</option>
      <option id="b2" value="lebanese">Lebanese</option>
      <option id="b3" value="chinese">Chinese</option>
      <option id="b4" value="egyption">Egyption</option>
    </select>
  </tr>
  <tr>
    <select>
      <option id="c1" value="color">Select Color</option>
      <option id="c2" value="red">Red</option>
      <option id="c3" value="yellow">Yellow</option>
      <option id="c4" value="green">Green</option>
    </select>
  </tr>
  <tr>
    <select>
      <option id="d1" value="computers">Select Computer</option>
      <option id="d2" value="hp">Hp</option>
      <option id="d3" value="acer">Acer</option>
      <option id="d4" value="toshiba">Toshiba</option>
    </select>
  </tr>
  <tr>
    <button id="btn1" class="myButton">Select Last Value</button>
  </tr>
</table>

Answer 2

You need to reset the attr of the dropdown so your code can run with out breaking the drops.

You can acomplish with the next line.

$("select option").removeAttr("selected");

Hope this helps :)

$(document).ready(function() {
  $("#btn1").click(function() {
    $("select option").removeAttr("selected");
    $("select option:last-child").attr("selected", "selected"); //Select the last drop down list option of each drop down list.
    setTimeout(function() {
      alert("Done!");
    }, 10)
  });
});

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style>
    //Style of my button.
    .myButton {
      -moz-box-shadow: inset 0px 1px 0px 0px #54a3f7;
      -webkit-box-shadow: inset 0px 1px 0px 0px #54a3f7;
      box-shadow: inset 0px 1px 0px 0px #54a3f7;
      background-color: #007dc1;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      border: 1px solid #124d77;
      display: inline-block;
      cursor: pointer;
      color: #ffffff;
      font-family: Arial;
      font-size: 15px;
      padding: 10px 9px;
      text-decoration: none;
    }
    
    .myButton:hover {
      background-color: #0061a7;
    }
    
    .myButton:active {
      position: relative;
      top: 1px;
    }
  </style>
  <script>
  </script>

</head>

<body>
  <table>
    <tr>
      <select>
        <option id="a1" value="cars">Select Car</option>
        <option id="a2" value="volvo">Volvo</option>
        <option id="a3" value="mercedes">Mercedes</option>
        <option id="a4" value="audi">Audi</option>
      </select>
    </tr>
    <tr>
      <select>
        <option id="b1" value="nationality">Select Nationality</option>
        <option id="b2" value="lebanese">Lebanese</option>
        <option id="b3" value="chinese">Chinese</option>
        <option id="b4" value="egyption">Egyption</option>
      </select>
    </tr>
    <tr>
      <select>
        <option id="c1" value="color">Select Color</option>
        <option id="c2" value="red">Red</option>
        <option id="c3" value="yellow">Yellow</option>
        <option id="c4" value="green">Green</option>
      </select>
    </tr>
    <tr>
      <select>
        <option id="d1" value="computers">Select Computer</option>
        <option id="d2" value="hp">Hp</option>
        <option id="d3" value="acer">Acer</option>
        <option id="d4" value="toshiba">Toshiba</option>
      </select>
    </tr>
    <tr>
      <button id="btn1" class="myButton">Select Last Value</button>
    </tr>
  </table>
</body>

</html>