jQuery: Wert aus mehreren Feldern abrufen und im Textfeld anzeigen

Question

Ich habe 6 verschiedene Auswahlfelder und ein Textfeld, das ich brauche, um den Wert zu holen und zu einem Textfeld mit jQuery zu kombinieren.

Ich verstehe im Wesentlichen den Wert für die targetTextField mit einer Zeichenfolge wie folgt ich will bauen: $('#targetTextField').val(opt1+opt2+opt3+opt4+opt5+opt6+textField);

Was muss ich tun, um den Wert von select#options1 und Transformation, die in zu opt1 holen?

Würde es in Richtung opt1 = $('select#options1').val(); oder bin ich in die falsche Richtung?

ich eine grundlegende jsfiddle mit nur zwei Optionen bei erstellt haben:

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">​ 

... aber es funktioniert nicht scheinen zu arbeiten, also habe ich offensichtlich etwas falsch verstanden oder verpasst.

Answer 1

Ich habe diese Demo für Sie, hoffen, dass es

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

für Drop-Down-Versuch folgende

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

Answer 3

haben einen Blick auf this es sollten Sie hoffentlich in einen Zeiger geben, was Sie tun müssen. Sie können den Namen in eine Klasse ändern und dann nur Ihr Format angeben, das in der Eingabe angezeigt werden soll. aber von deiner Frage aus angenommen, es sollte darüber sein.

Answer 4

hilft Wenn Sie verschiedene ID für Auswahlbox

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; 

haben Wenn Sie gleiche ID haben

$(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 wird normal wählen Tag mit ID.

Answer 5

Zunächst einmal eine Klasse für jede Ihrer select Elemente hinzufügen, um sich besser als Gruppe zu identifizieren:

<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"> 

dann in jQuery, können Sie map() verwenden, um ein Array der Werte zu erstellen und anzeigen :

$(".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

Sie können sehen, dass ich diese select Elemente WHI zu ignorieren eingerichtet haben ch bleiben auf ihrem Standardwert stehen. Wenn Sie die darunter liegende Zeile auskommentieren, werden alle Auswahlmöglichkeiten eingeschlossen, unabhängig vom ausgewählten Wert.

Answer 6

Minimal-Code für Sie erforderlich, wie unten:

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

Finden Sie die jsfiddle Demo here.