Вывод из select`a data-items

285

27 февраля 2018, 07:17

Здравствуйте, есть такой код

<script>
$(document).ready(function() {
  $("#selectf").change(function(){
    var country = $(this).val();
    alert(country);
    var el = document.getElementById('selectf').dataset.item;
    alert(el);
  });
});
</script>
<select id='selectf' data-item='1'>
    <option value='1'>Россия</option>
    <option value='2'>Украина</option>
</select>
<select id='selectf' data-item='2' style='display: block;'>
  <option value='1'>Россия</option>
  <option value='2'>Украина</option>
</select>
<select id='selectf' data-item='3' style='display: block;'>
  <option value='1'>Россия</option>
  <option value='2'>Украина</option>
</select>

У него все id одинаковы и поэтому он читает только первый, но он должен остаться таким. В конечном итоге надо выводить data-item того select`a, который был выбран

Answer 1

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

Информация с api.jquery.com:

Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
  $('[name="selectf"]').change(function(){ 
    var country = $(this).val(); 
    alert(country); 
    var el = $(this).data().item; 
    alert(el); 
  }); 
}); 
</script> 
 
<select id='selectf' name="selectf" data-item='1'> 
    <option value='1'>Россия</option> 
    <option value='2'>Украина</option> 
</select> 
 
<select id='selectf' name="selectf" data-item='2' style='display: block;'> 
  <option value='1'>Россия</option> 
  <option value='2'>Украина</option> 
</select> 
 
<select id='selectf' name="selectf" data-item='3' style='display: block;'> 
  <option value='1'>Россия</option> 
  <option value='2'>Украина</option> 
</select>

Answer 2

ID - всегда должен быть в единичном экземпляре! Задайте каждому элементу уникальный ID. А еще лучше задайте им общий класс, и перебирайте в цикле. В примере ниже я просто перебираю все select, которые присутствуют на странице.

$(document).ready(function() {
    $('select').each(function() {
        $(this).change(function() {
            var country = $(this).val();
            alert(country);
        });
    });
});