Получение id option

172
04 июля 2017, 23:37

Здравствуйте! Есть выпадающий список:

   $db = connectDB();
   $q = $db->query("SELECT `name`, `idUser` FROM `users`");
   echo '<select name="а">';
      while ($row = $q->fetch_assoc()){
      echo ("<option class='getId'  id='".$row["idUser"]."'>"  . $row["name"] . "</option>");
    }
    echo '</select>';

И скрипт с помощью которого нужно узнать id выбранного option:

  <script>
   $(document).ready(function(){
    $('.getId').on('click', function(){
     var getId = this.id;
     alert(getId);
    })
   });
  </script>

Но не работает. Даже просто alert не срабатывает

Answer 1

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

Также советую не аттачить userId к id элемента. А если у вас будет 2 селекта пользователей на странице? Для таких целей придумали dataset. Просто закидывайте все такие данные в data-... аттрибуты.

$('.user-select').change(function() { 
  let userId = $(this).find('option:selected').data('user-id'); 
  console.log('Changed to user #' + userId); 
}); 
 
$('.resolve-selected-user-id').click(function() { 
  let userId = $('.user-select option:selected').data('user-id'); 
  console.log('Selected user #' + userId); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<select class='user-select'> 
<option data-user-id='1'>user 1</option> 
<option data-user-id='2'>user 2</option> 
<option data-user-id='3'>user 3</option> 
</select> 
 
<button class='resolve-selected-user-id'>Show selected user id</button>

Answer 2

С JavaScript у вас всё правильно, но вы неправильно указали класс. Классы, как и другие аттрибуты, беруться только в двойные кавычки. а для этого просто экранируйте их или используйте одинарные вместо двойных(второй способ лучше):

$db = connectDB();
$q = $db->query("SELECT `name`, `idUser` FROM `users`");
echo '<select name="а">';
  while ($row = $q->fetch_assoc()){
  echo ('<option class="getId"  id=\"".$row["idUser"]."\">"  . $row["name"] . "</option>');
}
echo '</select>';
Answer 3

Вы не правильно указали селектор. Вот так было бы правильно:

 <script>
   $(document).ready(function(){
    $('.getId').on('click', function(){
     var getId = this.id;
     alert(getId);
    })
   });
  </script>
Answer 4

Вот как-то так и получаеться, через метод attr :

$(document).ready(function() { 
  $('.getId').on('click', function() { 
    var getId = $(this).attr('id'); 
    alert(getId); 
  }) 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<option class="getId" id="tratatata">GetId</option>

READ ALSO
Запись куки Yii2

Запись куки Yii2

Здравствуйте, подскажите, как можно получить нормальную (без лишнего текста) запись куки из Yii2

228
Создать объект такого же класса

Создать объект такого же класса

Как имея указатель на класс A хранящий адрес на объект класса B создать новый объект класса B?

241
Применение атомарных операций

Применение атомарных операций

Здравствуйте, я пытаюсь произвести запись информации в текстовый файл и в вектор, далее отсортировать вектор , и попросить вводить информацию...

199
Стандартные библиотеки С++

Стандартные библиотеки С++

Доброго времени суток гуру С++ и не толькоНачал изучать этот замечательный язык по книге 2016 , но, как оказывается, некоторые примеры не совсем...

189