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>

Answer 2

您需要重置下拉菜单的属性，以便您的代码可以在不破坏下拉菜单的情况下运行。

您可以完成下一行。

 tournamentData.put("author", user.getUid());
 data.put("author", user.getUid());

希望这会有所帮助：）

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

$(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)
  });
});

jQuery选择器仅在下拉列表中首次工作

2 个答案: