Как получить значение выбранного параметра из двух разных строк, но с одним и тем же идентификатором

Моя таблица находится в каждом цикле, и ее идентификатор установлен на id = "batchNo".

я хочу получить значение каждой строки select option выбранного значения.

я пытался использовать следующий код, но он возвращает выбранное значение строки 1.

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<table>
  <tr>
    <td>
      <select id = "batchNo">
        <option value = "341" selected>this is 341</option>
        <option value = "53">this is 53</option>
      </select>
    </td>
    <td><input type = "text" onfocusout = "return alert($('#batchNo').find(':selected').text())"></td>
  </tr>
  <tr>
    <td>
      <select id = "batchNo">
        <option value = "341">this is 341</option>
        <option value = "53" selected>this is 53</option>
      </select>
    </td>
    <td><input type = "text" onfocusout = "return alert($('#batchNo').find(':selected').text())"></td>
  </tr>
</table>

при выходе из 2-й строки должно возвращаться this is 53 но выдает this is 341

id в действительный HTML должен должен быть уникальным — так что ответ таков: вы не можете сделать это (надежно) — возможно, вместо этого используйте $(this).find....?

Jaromanda X 23.06.2019 15:38

Атрибут 'id' должен должен быть уникальным. Вместо этого используйте «класс».

wanjas 23.06.2019 15:38

использование класса не поможет этому коду @wanjas - первый элемент, полученный jquery, все равно будет первым выбором

Jaromanda X 23.06.2019 15:38

@Яроманда X, конечно. это только первый шаг

wanjas 23.06.2019 15:41

есть ли такая возможность, как эта $(thisrow).find(tag"select")(':selected').text() это, например

Danial212k 23.06.2019 15:43
this ... не thisrow ... this означает что-то в javascript, thisrow выдумано - неважно, только что понял, на какой элемент вы помещаете прослушиватель событий
Jaromanda X 23.06.2019 15:44

Я не могу быть таким же. Вы можете использовать цикл for, чтобы установить уникальный идентификатор и получить значение из этих идентификаторов. Например: партия №1 и партия №2

Anil Shrestha 23.06.2019 15:46
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
7
147
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

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

Способ 1 (с использованием имени класса)

<select class = 'batchNo'>
</select>

var result = document.querySelectorAll('.batchNo')
console.info(result) // prints list of all select

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

Способ 2 (с использованием идентификатора)

Как вы сказали, ваша таблица находится в цикле for, тогда вы можете получить номер итерации. цикла for и сгенерировать динамический идентификатор, как показано ниже.

<select id = "batchNo{{ for loop iteration no }}">
</select>

он будет генерировать идентификаторы, такие как партия №1, партия №2, партия №3 ....

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

Нужно найти «относительно» select. Вот что вы можете сделать:

$('input').on('blur', function() {
  const selectVal = $(this).parents('tr').find('.batchNo').find(':selected').text();
  console.info(selectVal);
});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<table>
  <tr>
    <td>
      <select class = "batchNo">
        <option value = "341" selected>this is 341</option>
        <option value = "53">this is 53</option>
      </select>
    </td>
    <td><input type = "text"></td>
  </tr>
  <tr>
    <td>
      <select class = "batchNo">
        <option value = "341">this is 341</option>
        <option value = "53" selected>this is 53</option>
      </select>
    </td>
    <td><input type = "text" /></td>
  </tr>
</table>

И, очевидно, чтобы избежать дублирования id, вам нужно изменить что-то другое, например class. (Вы также можете использовать атрибут data-*)

Mosh Feu, не могли бы вы проверить эту скрипку jsfiddle.net/5k6q92sd, так как я хочу, чтобы ее текст не был значением, значение приходит правильно индивидуально из вашего кода

Danial212k 23.06.2019 15:54

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

Я удалил ваш встроенный код и добавил класс .runOnFocusOut к входным данным, s

  1. Некоторые jquery запускаются через .focusout
  2. который перемещается вверх по дереву DOM до строки родительской таблицы, используя .closest("tr")
  3. прежде чем вернуться вниз по дереву DOM, найдите элемент с идентификатором #batchNo и дочерний параметр, выбранный с помощью option:select
  4. и, наконец, печать текста опции через .text()

Дайте мне знать, если это не то, на что вы надеялись


Демо

// Add focusout event via new class
$(".runOnFocusOut").focusout( function() {

  // Travel up DOM tree
  // Find selected options using option:select
  // Print the text
  console.info(  $(this).closest("tr").find("#batchNo option:selected").text() );

});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<table>
  <tr>
    <td>
      <select id = "batchNo">
        <option value = "341" selected>this is 341</option>
        <option value = "53">this is 53</option>
      </select>
    </td>
    <td><input type = "text" class = "runOnFocusOut"></td>
  </tr>
  <tr>
    <td>
      <select id = "batchNo">
        <option value = "344">this is 344</option>
        <option value = "56" selected>this is 56</option>
      </select>
    </td>
    <td><input type = "text" class = "runOnFocusOut"></td>
  </tr>
</table>

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