Как получить значение выбранного выпадающего значения по нажатию кнопки в JQuery

Question

Я использую Bootstrap с jquery для создания динамической таблицы, состоящей из выпадающего меню и кнопки.Я хочу получить значение выпадающего меню, выбранного в jquery по нажатию кнопки.

Ниже мой код

<table class="table table-bordered">
  <tbody>
  {% for item in items %}
    <tr>
      <td>
        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Select
          </button>
          <ul class="dropdown-menu" role="menu" id="options" onchange="selectFromDropDown(this.value)">
            <li><a id="weekly" selected>Option 1</a></li>
            <li><a id="biweekly">Option 2</a></li>
            <li><a id="monthly">Option 3</a></li>
          </ul>
        </div>
      </td>
      <td>
        <form data-toggle="validator" role="form" >
          <input type="submit" value="Update" class="btn btn-xs btn-block" id="update">
        </form>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>

И ниже jquery

$('#update').click(function(){
  alert($('#options option:selected').html())
});

Когда яЗапустите приведенный выше код, он возвращает "undefined".

Answer 1

Во-первых, ваш цикл for является дублирующим элементом id s.Атрибут id должен быть уникальным, иначе любая операция фильтрации, включая присоединение слушателей, вернет только первый элемент, и ваши действия не будут работать.В моем примере я выбрал другой селектор.Вы могли бы обойтись без него, используя дубликаты в ваших выпадающих списках "options" в качестве стандартных для value, если вы не нацелены на них напрямую.

Тогда, так какЭто несколько строк, вам нужно найти, в какой из них выпадающий список, чтобы вы могли получить соответствующее значение.Вы можете сделать это, используя closest и find.

Также, если у вас много строк, вы должны рассмотреть возможность использования делегирование события , чтобы к вам подключалось меньше слушателей.Я использовал это решение.

Теперь, поскольку выпадающий список не является реальным select, он не будет реагировать на события change, поэтому я также предоставил свою собственную функцию выбора с использованием делегатов.Поскольку это якорь, вы не можете использовать псевдоселектор :selected, вы должны проверить наличие атрибута.

$('table').on('click', '.btn-update', function(evt) {
  $clicked = $(this).closest('tr').find('.dropdown-menu a[selected]')
  console.log($clicked.text())
  // You can get the emulated 'value' too
  console.log($clicked.attr('id'))
  // Cancel the 'button' default action
  evt.preventDefault()
});

$('table').on('click', '.dropdown-menu', function(evt) {
  // Find the 'selected' anchor inside this dropdown and remove the attribute
  $(evt.currentTarget).find('a[selected]').removeAttr('selected')
  // Add the attribute to the clicked one
  $(evt.target).attr('selected', true)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
  <tbody>
    <tr>
      <td>
        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Select
          </button>
          <ul class="dropdown-menu" role="menu" id="options">
            <li><a id="weekly">Option 1</a></li>
            <li><a id="biweekly" selected>Option 2</a></li>
            <li><a id="monthly">Option 3</a></li>
          </ul>
        </div>
      </td>
      <td>
        <form data-toggle="validator" role="form">
          <input type="submit" value="Update" class="btn btn-xs btn-block btn-update" id="update">
        </form>
      </td>
    </tr>
    <tr>
      <td>
        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Select
          </button>
          <ul class="dropdown-menu" role="menu" id="options">
            <li><a id="weekly" selected>Option 1</a></li>
            <li><a id="biweekly">Option 2</a></li>
            <li><a id="monthly">Option 3</a></li>
          </ul>
        </div>
      </td>
      <td>
        <form data-toggle="validator" role="form">
          <input type="submit" value="Update" class="btn btn-xs btn-block btn-update" id="update">
        </form>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

Если вы используете select из-под контроля, не беспокойтесь о его кодировании.Просто сделайте небольшое изменение в вашем коде.

$('#update').click(function(){
  alert($('#options').val());
});

Или, если вы используете ul, li, измените код jquery следующим образом.

$('#update').click(function(){
  alert($('#options .selected').text())
});

Answer 3

Может б, вы ищете это.если это выпадающий список

$('#update').click(function(){
 alert($('#options').find(":selected").text());
});

если его неупорядоченный список, вы можете использовать этот

$('#update').click(function(){
 alert($('#options > li > a:selected').html());
});

Answer 4

Ваш поиск в jquery некорректен в событии click.Вы ищете тег option внутри идентификатора #option, и ваш html ссылается на неупорядоченный тег list.Сделайте поиск выбранного элемента по вашему html

$('#update').click(function(){
  alert($('#options > li > a:selected').html())
});

Answer 5

Попробуйте это:

$('#update').on('click', function () {
    alert($('#options').find('[selected]').html());
});

Сначала я использовал функцию on, поскольку функция click вызовет фактический щелчок (IIRC).

Затем яиспользовать выбранный CSS [selected], который является селектором атрибута ;в сочетании с find (который ищет детей для селектора), он должен работать.

---

После всего сказанного и выполненного невозможно изменить атрибут selected , щелкнув раскрывающийся список, - если только вы не используете JavaScript - потому что только options использует выбранноеатрибут.

$('#options a').on('click', function () {
    $('#options a').removeAttr('selected');
    $(this).attr('selected', true);
});

Приведенный выше код - это обходной путь, который позволит вашему раскрывающемуся списку корректно работать с моим кодом выше.
По сути, все, что он делает, это удаляет выбранный атрибут из все #option a элементов, а затем передает его тому, на котором был выполнен щелчок.

JSFiddle
_{Для краткости я использовал JSFiddle, а не фрагмент, посколькуэтот ответ уже довольно длинный и не позволяет повторять код, задаваемый вопросом ...}