Блог

Главная - Вопросы по программированию - Как вставить значение из select в текстовую область, где есть несколько выпадающих списков и выбрать с одинаковыми именами классов

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

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

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

 //Insert value form dropdown in textarea
$(document).ready(function(){
    $(".js-example-basic").change(function () {
            $(".textArea").val(this.value);
     }).change();
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selectValue">
  <select name="selectProgram[]" class="js-example-basic">
    <option value="">Choose tour</option>
    <option value="Tour1">Tour 1</option>
    <option value="Tour2">Tour 2</option>
    <option value="Tour3">Tour 3</option>
  </select>
  <textarea name="tourText[]" class="form-control textArea" placeholder="Tour description"></textarea>
</div>
<div class="selectValue">
  <select name="selectProgram[]" class="js-example-basic">
    <option value="">Choose tour</option>
    <option value="Tour1">Tour 1</option>
    <option value="Tour2">Tour 2</option>
    <option value="Tour3">Tour 3</option>
  </select>
  <textarea name="tourText[]" class="form-control textArea" placeholder="Tour description"></textarea>
</div>

Поработайте с приведенным выше кодом

Ответ №1:

Это происходит потому, что класс textarea одинаков.

Вы почти на месте. Используйте this with next , чтобы получить желаемый результат в текстовой области.

 //Insert value form dropdown in textarea
$(document).ready(function(){
    $(".js-example-basic").change(function () {
       $(this).next(".textArea").val(this.value);
     }).change();
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <select name="selectProgram[]" class="js-example-basic">
    <option value="">Choose tour</option>
    <option value="Tour1">Tour 1</option>
    <option value="Tour2">Tour 2</option>
    <option value="Tour3">Tour 3</option>
  </select>
  <textarea name="tourText[]" class="form-control textArea" placeholder="Tour description"></textarea>
</div>
<div>
  <select name="selectProgram[]" class="js-example-basic">
    <option value="">Choose tour</option>
    <option value="Tour1">Tour 1</option>
    <option value="Tour2">Tour 2</option>
    <option value="Tour3">Tour 3</option>
  </select>
  <textarea name="tourText[]" class="form-control textArea" placeholder="Tour description"></textarea>
</div>