Как назначить несколько выбранных значений в текстовое поле с помощью jquery

Question

Я хочу назначить несколько выбранных значений в другое текстовое поле. Если я выбрал четыре параметра, присвойте значения четырем различным текстовым полям.

Html код

<select name="garden" multiple="multiple"> 
    <option>Flowers</option> 
    <option>Shrubs</option> 
    <option>Trees</option> 
    <option>Bushes</option> 
    <option>Grass</option> 
    <option>Dirt</option> 
</select> 
<div></div> 
<input type="text" id="opt1" /> 
<input type="text" id="opt2"/> 
<input type="text" id="opt3" /> 
<input type="text" id="opt4" /> 

Что я сделал образец Jquery код

<script> 
$("select") 
    .change(function() { 
    var str = ""; 
    $("select option:selected").each(function() { 
     str += $(this).text() + " "; 
    }); 
    $("div").text(str); 

    }); 
    }) 
    .trigger("change"); 
</script> 

Пожалуйста, кто-нибудь помочь в этом. Спасибо за вашу корпорацию

Answer 1

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="garden" multiple="multiple"> 
 
    <option>Flowers</option> 
 
    <option>Shrubs</option> 
 
    <option>Trees</option> 
 
    <option>Bushes</option> 
 
    <option>Grass</option> 
 
    <option>Dirt</option> 
 
</select> 
 
<div></div> 
 
<input type="text" id="opt1" /> 
 
<input type="text" id="opt2" /> 
 
<input type="text" id="opt3" /> 
 
<input type="text" id="opt4" /> 
 

 
<script> 
 
    $("select").change(function() { 
 
     var str = ""; 
 
     $("select option:selected").each(function(i) { 
 
     str += $(this).text() + " "; 
 
     $('#opt' + (i + 1)).val($(this).text()); 
 
     }); 
 
     $("div").text(str); 
 
    }) 
 
    .trigger("change"); 
 
</script>

---

Гораздо лучше было использовать общий class для входов и вы можете получить элемент по индексу, используя :eq() селектор псевдо-класса в JQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="garden" multiple="multiple"> 
 
    <option>Flowers</option> 
 
    <option>Shrubs</option> 
 
    <option>Trees</option> 
 
    <option>Bushes</option> 
 
    <option>Grass</option> 
 
    <option>Dirt</option> 
 
</select> 
 
<div></div> 
 
<input type="text" class="opt" /> 
 
<input type="text" class="opt" /> 
 
<input type="text" class="opt" /> 
 
<input type="text" class="opt" /> 
 

 
<script> 
 
    $("select").change(function() { 
 
     var str = ""; 
 
     $("select option:selected").each(function(i) { 
 
     str += $(this).text() + " "; 
 
     $('.opt:eq(' + i + ')').val($(this).text()); 
 
     }); 
 
     $("div").text(str); 
 
    }) 
 
    .trigger("change"); 
 
</script>

---

ОБНОВЛЕНИЕ: Для ограничения количества выбора всегда кэшировать выбранное значение в глобальной переменной и восстановления, когда выбран параметр подсчета больше, чем ожидалось.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="garden" multiple="multiple"> 
 
    <option>Flowers</option> 
 
    <option>Shrubs</option> 
 
    <option>Trees</option> 
 
    <option>Bushes</option> 
 
    <option>Grass</option> 
 
    <option>Dirt</option> 
 
</select> 
 
<div></div> 
 
<input type="text" class="opt" /> 
 
<input type="text" class="opt" /> 
 
<input type="text" class="opt" /> 
 
<input type="text" class="opt" /> 
 

 
<script> 
 
    var sel; 
 
    $("select").change(function() { 
 
     var str = "", 
 
     $selected = $("select option:selected"); 
 

 
     if ($selected.length > 4) 
 
     $(this).val(sel); 
 
     else 
 
     sel = $(this).val(); 
 

 
     $selected.each(function(i) { 
 
     str += $(this).text() + " "; 
 
     $('.opt:eq(' + i + ')').val($(this).text()); 
 
     }); 
 
     $("div").text(str); 
 
    }) 
 
    .trigger("change"); 
 
</script>

См: Multiple Select limit number of selection

Answer 2

Решение состоит в том, как,

с использованием trigger в Jquery

Working Demo

$("select option:selected").each(function(i) { 
    if(i <= 4) { 
     resVal += $(this).text() + " "; 
     $('#opt' + (i + 1)).val($(this).text()); 
    } 
    }); 

    $("div").text(resVal); 

Answer 3

Попробуйте использовать каждый раз, когда вы выбираете назначение с помощью другого текстового поля. Увеличиваем счетчик каждого временного click.It будет совпадать с ids из текстового поля

var count=1; 
 
$("select").change(function() { 
 
    var str = ""; 
 
    $("select").each(function() { 
 
     str += $(this).val() + " "; 
 
    }); 
 
     $("div").text(str); 
 

 
     $('#opt'+count).val(str); 
 
    count ++; 
 
     
 
    }); 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="garden" multiple="multiple"> 
 
    <option>Flowers</option> 
 
    <option>Shrubs</option> 
 
    <option>Trees</option> 
 
    <option>Bushes</option> 
 
    <option>Grass</option> 
 
    <option>Dirt</option> 
 
</select> 
 
<div></div> 
 
<input type="text" id="opt1" /> 
 
<input type="text" id="opt2"/> 
 
<input type="text" id="opt3" /> 
 
<input type="text" id="opt4" />