I thought I had this figured out, but can’t get it working correctly:
All I want is the following:
onChange of either of these dropdowns take the selected value and add it to the hiddentext field [in the actual app, these dropdowns are in a fieldset and only one or the other is displayed based on product type selected] Simple I know, but I can’t see what I am doing wrong.
Code below and my jsFiddle is here: http://jsfiddle.net/justmelat/M3hyX/
<form method="post" action="">
<fieldset name="projInfo" id="projInfo">
<legend>Proj Info</legend>
Hidden Product Field: <input name="hiddenProdField" id="hiddenProdField" type="text" />
</fieldset>
<fieldset name="Group1" id="Group1">
<legend>Product 1</legend>
<select name="firstSet" id="firstSet">
<option value="0">Select</option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
</fieldset>
<fieldset name="Group2" id="Group2">
<legend>Product 2</legend>
<select name="secondSet" id="secondSet">
<option value="0">Select</option>
<option value="Four">Four</option>
<option value="Five">Five</option>
<option value="Six">Six</option>
</select>
</fieldset>
<fieldset name="Group3" id="Group3">
<legend>Product 3</legend>
<select name="thirdSet" id="thirdSet">
<option value="0">Select</option>
<option value="Seven">Seven</option>
<option value="Eight">Eight</option>
<option value="Nine">Nine</option>
</select>
</fieldset>
</form>
$(document).ready(function() {
$("select#firstSet, select#secondSet, select#thirdSet").change(function(){
var prodType = "";
$("select#firstSet, select#secondSet, select#thirdSet option:selected");
prodType = $(this).text();
$("#hiddenProdField").text(prodType);
})
.trigger('change');
});
DEMO