jQuery将输入字段值设置为多个选择中的选定选项

时间:2019-09-06 17:53:42

标签: jquery

如何将名称为“ entry.1471599855”的输入字段的值设置为每个选择下拉列表的选择选项(每个选择值均用逗号分隔)?

HTML

<div class="hardwareValidation">

<div class="select">
    <label for="hwA-qty">CANTIDAD DE PARES</label><br />
    <label>1 <input type="radio" name="hwA-qty" value="1" checked /></label>
    <label>2 <input type="radio" name="hwA-qty" value="2" /></label>
    <label>3 <input type="radio" name="hwA-qty" value="3" /></label>

</div>




<fieldset id="hwA-1">
   <div class="form-group"><select class="form-control" id="talle1" name="entry.978809450"><option selected value="seleccione">-- Seleccione Talle --</option><option value="35-andrea">35</option><option value="36-andrea">36</option><option value="37-andrea">37</option><option value="38-andrea">38</option><option value="39-andrea">39</option><option value="40-andrea">40</option></select></div>
</fieldset>                     

<fieldset id="hwA-2" class="fieldsetstalles">
   <div class="form-group"><select class="form-control" name="entry.978809450"><option selected value="seleccione">-- Seleccione Talle --</option><option value="35-viviana">35</option><option value="36-viviana">36</option><option value="37-viviana">37</option><option value="38-viviana">38</option><option value="39-viviana">39</option><option value="40-viviana">40</option></select></div>
</fieldset>

<fieldset id="hwA-3" class="fieldsetstalles">
  <div class="form-group"><select class="form-control"name="entry.978809450"><option selected value="seleccione">-- Seleccione Talle --</option><option value="35-francesca">35</option><option value="36-francesca">36</option><option value="37-francesca">37</option><option value="38">38</option><option value="39-francesca">39</option><option value="40-francesca">40</option></select></div>
</fieldset>

<br><br><br><br><br>
<fieldset><legend for="1284324650">TALLES DE CADA MODELO:<br>
</legend>

<div class="form-group"><input class="form-control" id="1471599855" name="entry.1471599855" placeholder="Los talles de cada modelo seleccionado" required="" type="text"></div>
</fieldset>

</div>

JavaScript函数:

$('input[name="hwA-qty"]').click(function(){
     $('fieldsetstalles').show();
    var selected = $(this).val();

    for(i=1;i<=3;i++){
       if(i<=selected)$('fieldset#hwA-'+i).show();
       else $('fieldset#hwA-'+i).hide();
    }
});

JSFIDDLE

http://jsfiddle.net/147qsojv/6/

1 个答案:

答案 0 :(得分:1)

更改后,您将希望捕获所选内容的所选值。然后将这些值连接起来,然后将输入值设置为连接的值。

类似的方法会起作用,但是您可能希望去除最后一个逗号。

var val1, val2, val3 = "";
var theval = $("#1471599855");

$("#talle1").change(function(){
    val1 = $(this).children("option:selected").val();
    //addVals = addVals + val1;
    theval.val(theval.val() + val1 + ", ");             
});

$("#talle2").change(function(){
    val2 = $(this).children("option:selected").val();
    //addVals = addVals + val2;
    theval.val(theval.val() + val2 + ", ");             
});

$("#talle3").change(function(){
    val3 = $(this).children("option:selected").val();
            //addVals = addVals + val3;
    theval.val(theval.val() + val3);                
});