Выберите значение и заполните данные в текстовой области

Question

JsFiddle: https://jsfiddle.net/d904amng/ (не так, как я хотел)

$("#counties").click(function(){
    var selectedValues = [];    
    $("#counties :selected").each(function(){
        selectedValues.push($(this).val()); 
    });
   $("#email").val(selectedValues);
});

function setMail(){}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div>    
  Email:
  <br>
  <textarea type="text" id="email"></textarea>
</div>
<div>
  <br>
  Counties:
  <br>
  <select id="counties" onClick="return setMail()" >
    <option data-mail="1" value="Choose One">Choose One</option>
    <option data-mail="2" value="Charlotte">Charlotte</option>
    <option data-mail="3" value="Collier">Collier</option>
  </select>
</div>

То, что я хотел:

1. Когда пользователь нажимает «Шарлотта», он заполняет «Шарлотта» для текстовой области.
2. После этого пользователь выбирает «Collier», после «Charlotte Text» он заполняет «Collier»

Как это будет выглядеть после выбора обоих из них

Текст: Шарлотта, Кольер

Answer 1

Несколько ошибок в вашем коде:

1. При каждом событии создается новый массив (selectedValues). Вы должны объявить selectedValues вне функции обработчика событий.

2. Вы также можете проверить, присутствует ли элемент в массиве или нет.

3. Вы можете думать о изменении события вместо нажмите здесь.

4. Поскольку можно выбрать только одну опцию за один раз, вам не нужно .each() для циклического перебора выбранной опции, поскольку это бессмысленно.

var selectedValues = []; 
$("#counties").change(function(){
  if(!selectedValues.includes($(this).val()) && $(this)[0].selectedIndex != 0)
    selectedValues.push($(this).val()); 
  $("#email").val(selectedValues.join('\n'));
})

function setMail(){}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>    
  Email:
  <br>
  <textarea type="text" id="email"></textarea>
</div>
<div>
  <br>
  Counties:
  <br>
  <select id="counties" onClick="return setMail()" >
    <option data-mail="1" value="Choose One">Choose One</option>
    <option data-mail="2" value="Charlotte">Charlotte</option>
    <option data-mail="3" value="Collier">Collier</option>
  </select>
</div>

Обновлено, как указано в комментарии:

var selectedValues = []; 
$("#counties").click(function(){
  if($(this)[0].selectedIndex != 0)
    selectedValues.push($(this).val()); 
  $("#email").val(selectedValues.join('\n'));
})

function setMail(){}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>    
  Email:
  <br>
  <textarea type="text" id="email"></textarea>
</div>
<div>
  <br>
  Counties:
  <br>
  <select id="counties" onClick="return setMail()" multiple>
    <option data-mail="1" value="Choose One">Choose One</option>
    <option data-mail="2" value="Charlotte">Charlotte</option>
    <option data-mail="3" value="Collier">Collier</option>
  </select>
</div>

Answer 2

Вы можете использовать change() и напрямую увеличивать значение до selectedValues[], а не зацикливаться с помощью each().

Кроме того, пустое значение как value="" также может быть полезным, так как вы не хотите Choose One в вашем textarea

var selectedValues = [];
$("#counties").change(function() {
  if (!selectedValues.includes($(this).val()) && $(this).val())
    selectedValues.push($(this).val());
  $("#email").val(selectedValues);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  Email:
  <br>
  <textarea type="text" id="email"></textarea>
</div>
<div>
  <br> Counties:
  <br>
  <select id="counties">
    <option data-mail="1" value="">Choose One</option>
    <option data-mail="2" value="Charlotte">Charlotte</option>
    <option data-mail="3" value="Collier">Collier</option>
  </select>
</div>

Несколько

var selectedValues = [];
$("#counties").change(function() {
  if ($(this).val())
    selectedValues.push($(this).val());
  $("#email").val(selectedValues);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  Email:
  <br>
  <textarea type="text" id="email"></textarea>
</div>
<div>
  <br> Counties:
  <br>
  <select id="counties">
    <option data-mail="1" value="">Choose One</option>
    <option data-mail="2" value="Charlotte">Charlotte</option>
    <option data-mail="3" value="Collier">Collier</option>
  </select>
</div>