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

Question

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

我明白我基本上将打造为targetTextField价值，像这样的字符串：$('#targetTextField').val(opt1+opt2+opt3+opt4+opt5+opt6+textField);

我应该使用什么来获取的select#options1价值和变换中opt1？

难道是沿着opt1 = $('select#options1').val();的方向吗？还是我完全朝着错误的方向走？

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

http://jsfiddle.net/e2ScF/2/

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

如果你有一个选择框

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; 

不同的ID如果你有相同的ID

$(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元素WHI ch留在他们的默认值。如果取消注释下面的行，它将包括所有选择，而不管所选的值如何。

Answer 6

你需要如下最少的代码：

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

找到的jsfiddle演示here。