it-roy-ru.com

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

Я использую 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())
});

Когда я запускаю код выше, он возвращает «неопределенный».

2
Rookie

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

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

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

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

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

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

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

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

0
JustCarty

Во-первых, ваш цикл for дублирует элемент ids. Атрибут 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>

0
msg

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

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

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

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

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

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