Jquery: Get Value From Multiple Fields And Show In Text Field

I have 6 different select boxes and a text field which I need to fetch the value from and combine in to one text field using jQuery. I understand essentially I will build the value

Solution 1:

I made this demo for you, hope it helps

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 targetfunctionsetTarget(){
    var tmp = $("#options").val();
    tmp += $("#options2").val();
    $('#targetTextField').val(tmp);
}
​

Solution 2:

for dropdown try following

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

Solution 3:

have a look at this it should hopefully give you a pointer in what you need to do. you can change the name to be a class and then just provide your format you want to display in the input. but from your question in presume it should be about that.

Solution 4:

If you have different id for select box

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;

If you have same id

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

});

HTml will be normal select tag with id.

Solution 5:

First of all, add a class to each of your select elements to better identify them as a group:

<selectid="options"class="auto-updater"><optionvalue=""selected>Choose...</option><optionvalue="opt1Value1" >Option 1</option><optionvalue="opt1Value2" >Option 2</option></select><selectid="options2"class="auto-updater"><optionvalue=""selected>Choose...</option><optionvalue="opt2Value1" >Option 1</option><optionvalue="opt2Value2" >Option 2</option></select><inputtype="text"id="targetTextField"name="targetTextField"size="31"tabindex="0"maxlength="99">

Then in jQuery, you can use map() to create an array of the values and display them:

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

You can see that I've set this up to ignore select elements which are left on their default value. If you uncomment the line beneath it will include all selects, regardless of value chosen.