Селекторы jquery работают только в первый раз в раскрывающемся списке

Моя цель - выбрать последний вариант из всех раскрывающихся списков на странице (все идет правильно, но когда я пытаюсь запустить свой код во второй раз, результаты не меняются) Я попытался зарегистрировать код селектора 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>

Этот код дает мне результаты только в первый раз, но после второго раза что-то идет не так.

javascript jquery

24.06.2018 20:52

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вам нужно сбросить атрибут раскрывающегося списка, чтобы ваш код мог работать, не нарушая падение.

Вы можете выполнить следующую строку.

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

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

Когда вы повторно запускаете свой код, в последней опции уже выбран атрибут attr. Итак, в qay код пропускает его, и поэтому вы видите последний вариант как результат. Но если вы проверите код, вы увидите, что для него выбран атрибут attr. После того, как вы сбросите все атрибуты attrs. Он выполнит изменение в DOM

— 24.06.2018 21:16

24.06.2018 20:56

Ответ принят как подходящий

Вы устанавливаете атрибут для этой опции, но я думаю, вам следует вместо этого изменить <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>

24.06.2018 20:58

Другие вопросы по теме

Не удается получить раскрывающееся меню при загрузке

Установить файлы cookie при выборе варианта в javascript ajax

Как динамически удалять элементы в javascript?

JQuery, находящий потомка по идентификатору, не работает

Запретить использование всех символов и символов, если первый символ не # в jquery или javascript

Повторное включение клавиши табуляции после отключения на одной странице

JQuery, как проверить только собственный дочерний элемент

Цикл внутри функции Ajax .html

Кнопки Tinymce не отображаются на некоторых страницах

Сделайте так, чтобы контент оставался в одной строке на всех телефонных устройствах

Селекторы jquery работают только в первый раз в раскрывающемся списке

Ответы 2

Другие вопросы по теме

Похожие вопросы