Question

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 for the targetTextField with a string like this: $('#targetTextField').val(opt1+opt2+opt3+opt4+opt5+opt6+textField);

What do I use to fetch the value of select#options1 and transform that in to opt1?

Would it be along the lines of opt1 = $('select#options1').val(); or am I heading in completely the wrong direction?

I’ve created a basic jsfiddle with just two options at:

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

…but it doesn’t appear to be working, so I’ve obviously misunderstood or missed something.

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