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>