Блог

Главная - Вопросы по программированию - Получить значение из уникального добавленного селектора с помощью Javascript или jQuery

Получить значение из уникального добавленного селектора с помощью Javascript или jQuery

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

У меня есть кнопка, которая порождает селектор и div, оба с уникальными идентификаторами. Я пытаюсь получить значение из одного из этих уникальных добавленных селекторов с помощью функции jQuery. Пока я могу получить значение из опции селектора и показать в div, но оно отображается в любом другом div, который был создан. Я хочу показывать только в div, связанном с селектором.

 $(document).on('click', '#createNewLayer', function () {
      $('#mainSeparator').append(
        '<div id="newLayer" class="newLayer"> <div class="form-row"> <div class="form-group col-md-6"> <select class="form-control mySelector" id="selector"> <option hidden disabled selected value>Select an option</option> <option>1</option> <option>2</option> <option>3</option><option>4</option> </select> </div></div><div class="newDiv"></div></div>'
      );
});

$(document).on('change', '.mySelector', function () {
  var str = $(this).find('option:selected').map(function () {
    return $(this).text();
  }).get().join('');
  $('.newDiv').text(str);
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mainSeparator">
  <div id="newLayer" class="newLayer">        
    <div class="form-row">
      <div class="form-group col-md-6">
        <select class="form-control mySelector" id="selector">
          <option hidden disabled selected value>Select an option</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
      </div>
    </div>
    <div class="newDiv"></div>
  </div>      
</div>
<button type="button" class="btn btn-primary" id="createNewLayer" style="margin-top: 20px;">New Layer</button>

Ответ №1:

Вы должны переключиться $('.newDiv').text(str) с помощью $(this).closest('.newLayer').find('.newDiv').text(str);

Проблема в том, что вы нацелены не на конкретный $('.newDiv') , а на все из них.

Рабочая демонстрация

 $(document).on('click', '#createNewLayer', function() {
  $('#mainSeparator').append(
    '<div id="newLayer" class="newLayer"> <div class="form-row"> <div class="form-group col-md-6"> <select class="form-control mySelector" id="selector"> <option hidden disabled selected value>Select an option</option> <option>1</option> <option>2</option> <option>3</option><option>4</option> </select> </div></div><div class="newDiv"></div></div>'
  );
});

$(document).on('change', '.mySelector', function() {
  var str = $(this).find('option:selected').map(function() {
    return $(this).text();
  }).get().join('');
  $(this).closest('.newLayer').find('.newDiv').text(str);
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mainSeparator">
  <div id="newLayer" class="newLayer">
    <div class="form-row">
      <div class="form-group col-md-6">
        <select class="form-control mySelector" id="selector">
          <option hidden disabled selected value>Select an option</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
      </div>
    </div>
    <div class="newDiv"></div>
  </div>
</div>
<button type="button" class="btn btn-primary" id="createNewLayer" style="margin-top: 20px;">New Layer</button>

Комментарии:

1. Я понял, что мне следует делать, но понятия не имел, как. Большое вам спасибо!