0

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

<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, который был выбран

2 ответа 2

0

В данном случае 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>

3
  • А как мне добавить в SELECT информация? el.innerHTML = dispcity;
    – Chipa Chop
    26 фев 2018 в 8:36
  • @ChipaChop не совсем понимаю что именно требуется... Задайте лучше новый вопрос и покажите что ожидаете на выходе.
    – yolosora
    26 фев 2018 в 8:38
  • Смотрите, есть SELECT, при запуске функции надо добавлять option в SELECT с data-item на 1 больше.
    – Chipa Chop
    26 фев 2018 в 8:58
0

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

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.