javascript - Jquery 选择器仅在第一次在下拉列表中起作用

Question

我的目标是选择页面中所有下拉框的最后一个选项(一切都很顺利，但是当我尝试第二次运行我的代码时，结果没有改变)我尝试记录 jquery 选择器代码，但没有不明白结果我不知道为什么我的代码只在第一次有效。这是我的代码:

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

这段代码第一次给出了结果，但第二次之后出现了问题。这是什么？

Answer 1

您正在为该选项设置一个属性，但我想您应该更改 <select>相反。

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