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。