Question

我有6个不同的选择框和一个文本字段，我需要从中获取值并使用jQuery将其合并到一个文本字段中。

我基本上理解我将使用如下字符串为targetTextField构建值：$('#targetTextField').val(opt1+opt2+opt3+opt4+opt5+opt6+textField);

我用什么来获取select#options1的值并将其转换为opt1？

它会沿着opt1 = $('select#options1').val();的路线走，还是我走向错误的方向？

我创建了一个基本的jsfiddle，只有两个选项：

的jQuery

$(function() {
    $("#options").change(function(){
    var opt1 = $('select#options').val()
    }$('#targetTextField').val(opt1+opt2);
});
    $("#options2").change(function(){
    var opt2 = $('select#options2').val()
    }$('#targetTextField').val(opt1+opt2);
});
});

HTML

<select id="options">
  <option value="" selected>Choose...</option>
  <option value="opt1Value1" >Option 1</option>
  <option value="opt1Value2" >Option 2</option>
</select>
<select id="options2">
  <option value="" selected>Choose...</option>
  <option value="opt2Value1" >Option 1</option>
  <option value="opt2Value2" >Option 2</option>
</select>
<input type="text" id="targetTextField" name="targetTextField" size="31" tabindex="0" maxlength="99">

...但它似乎没有用，所以我显然误解或错过了什么。

Answer 1

我为你做了这个演示，希望有所帮助

http://jsfiddle.net/e2ScF/5/

$(function() {
$("#options").change(function(){
        setTarget() ; // Something has changed so lets rebuild the target
});
    $("#options2").change(function(){
        setTarget();// Something has changed so lets rebuild the target
});
});

// Just get the values you want and update the target
function setTarget(){
    var tmp = $("#options").val();
    tmp += $("#options2").val();
    $('#targetTextField').val(tmp);
}

Answer 2

下拉试试

 $('select option:selected').text()

Answer 3

看看this它应该有希望给你一个你需要做的指针。您可以将名称更改为类，然后只提供要在输入中显示的格式。但是从你的问题中推测它应该是关于那个。

Answer 4

如果您选择框的ID不同

  var toalopt=$('select option1:selected').text();
    toalopt+=$('select option2:selected').text();
    toalopt+=$('select option3:selected').text();
    toalopt+=$('select option4:selected').text();
    toalopt+=$('select option5:selected').text();
    toalopt+=$('select option6:selected').text();

    document.getElementById('id where you want to club data').innerHTML=toalopt;

如果你有相同的身份

   $(document).ready(function(){
    $('#optionvalue).click(function(){
        var values ='';
        $('select[name="sameid"]').each(function(index,item){
            values +=$(item).val() +' ';
        });
            $('id where you want to club data').val(values);
    });

});

HTml将是带有id的正常选择标记。

Answer 5

首先，为每个select元素添加一个类，以便更好地将它们标识为一个组：

<select id="options" class="auto-updater">
  <option value="" selected>Choose...</option>
  <option value="opt1Value1" >Option 1</option>
  <option value="opt1Value2" >Option 2</option>
</select>

<select id="options2" class="auto-updater">
  <option value="" selected>Choose...</option>
  <option value="opt2Value1" >Option 1</option>
  <option value="opt2Value2" >Option 2</option>
</select>

<input type="text" id="targetTextField" name="targetTextField" size="31" tabindex="0" maxlength="99">

然后在jQuery中，您可以使用map()创建值的数组并显示它们：

$(".auto-updater").change(function() {
    var values = $(".auto-updater").map(function() {
        return ($(this).val() == "") ? null : $(this).val(); // ignore default option select
        // return $(this).val(); // include all values
    }).get();

    $("#targetTextField").val(values.join(','));
});

Example fiddle

您可以看到我将其设置为忽略保留默认值的select元素。如果取消注释下面的行，则无论选择何种值，都将包括所有选择。

Answer 6

您需要的最少代码如下：

$(function() {
       $("select").change(function(){
          var opts=$('option:selected').val();
          var oldVal=$('#targetTextField').val();
             $('#targetTextField').val(oldVal+opts);  
    });   
});

找到jsfiddle demo here。

jQuery：从多个字段中获取值并在文本字段中显示

6 个答案: