asked on
Using jQuery to populate dropdownist in a table
I have a table that has an input field (age) and a dropdownlist (skierType). When the users leaves the age field (blur or onchange) I want to clear the skierType dropdownlist for that row and populate the dropdownlist with the new values from an array that has a value/text pair for that age group. How can I do this with jQuery or just javaScript without the framework?
<table bgcolor="white" cellspacing="0" id="demoTable">
<tr>
<th class="demoHeader" style="width: ;">Del.</th>
<th class="demoHeader" style="width: ;">Full Name</th>
<th class="demoHeader" style="width: ;">Height</th>
<th class="demoHeader" style="width: ;">Weight</th>
<th class="demoHeader" style="width: ;">Age</th>
<th class="demoHeader" style="width: ;">Sex</th>
<th class="demoHeader" style="width: ;">Shoe<br />
Size</th>
<th class="demoHeader" style="width: ;">Start<br />
Date</th>
<th class="demoHeader" style="width: ;">End<br />
Date</th>
<th class="demoHeader" style="width: ;">Skier<br />
Type</th>
<th class="demoHeader" style="width: ;">Package</th>
<th class="demoHeader" style="width: ;">Equip<br />
Length</th>
<th class="demoHeader" style="width: ;">Insur-<br />
ance?</th>
<th class="demoHeader" style="width: ;">Reg.<br />
Cost</th>
</tr>
<tr>
<td>
<span style="background-color: red; border: 1px solid black;">
X</span></td>
<td bgcolor="white">
<input class="demoField" name="fullName0" size="15" type="text" value="" /></td>
<td>
<input class="demoField" name="height0" size="4" type="text" value="" /></td>
<td>
<input class="demoField" name="weight0" size="3" type="text" value="" /></td>
<td>
<input class="demoField" name="age0" size="2" type="text" value="" /></td>
<td>
<select class="demoField" name="sex0" style="font-size: 10px;">
<option value="m">M</option>
<option value="f">F</option>
</select></td>
<td>
<select class="demoField" name="shoeSize0" style="font-size: 10px;">
<option value="1">Select</option>
<option value="A_1.0">1.0</option>
<option value="A_1.5">1.5</option>
<option value="A_2.0">2.0</option>
<option value="A_2.5">2.5</option>
<option value="A_3.0">3.0</option>
<option value="A_3.5">3.5</option>
<option value="A_4.0">4.0</option>
</select></td>
<td>
<input class="demoField" name="skierStartDate0" size="8" type="text" value="" /></td>
<td>
<input class="demoField" name="skierEndDate0" size="8" type="text" value="" /></td>
<td>
<select class="demoField" name="skierType0" style="font-size: 10px;">
<option value="1">TBD*</option>
<option value="2">Type 1</option>
<option value="3">Type 2</option>
<option value="4">Type 3</option>
</select></td>
<td>
<select class="demoField" name="packageId_FK0" style="font-size: 10px;">
<option style="font-size: 10px;" value="1">Enter Skier Info
First</option>
<option style="font-size: 10px;" value="2">Adult Basic Ski Pkg
- $19</option>
<option style="font-size: 10px;" value="3">Junior Ski Pkg -
$11</option>
<option style="font-size: 10px;" value="4">Child Ski Pkg - $7
</option>
<option style="font-size: 10px;" value="5">Adult Performance
Ski Pkg - $23</option>
<option style="font-size: 10px;" value="6">High Performance
Ski Pkg - $27</option>
<option style="font-size: 10px;" value="7">Basic Snowboard Pkg
- $25</option>
<option style="font-size: 10px;" value="8">Performance Snowboard
Pkg - $32</option>
<option style="font-size: 10px;" value="9">Basic Snowblade Pkg
- $19</option>
<option style="font-size: 10px;" value="10">Upgrade Snowblade
Pkg - $21</option>
</select></td>
<td>
<input class="demoField" name="equipLength0" size="3" type="text" value="" /></td>
<td>
<input checked="checked" name="isInsurance0" type="checkbox" value="1" /></td>
<td class="demoField">$0.00</td>
<td><input name="extCost0" type="hidden" value="0" /></td>
</tr>
<tr>
<td>
<span style="background-color: red; border: 1px solid black;">
X</span></td>
<td bgcolor="white">
<input class="demoField" name="fullName1" size="15" type="text" value="" /></td>
<td>
<input class="demoField" name="height1" size="4" type="text" value="" /></td>
<td>
<input class="demoField" name="weight1" size="3" type="text" value="" /></td>
<td>
<input class="demoField" name="age1" size="2" type="text" value="" /></td>
<td>
<select class="demoField" name="sex1" style="font-size: 10px;">
<option value="m">M</option>
<option value="f">F</option>
</select></td>
<td>
<select class="demoField" name="shoeSize1" style="font-size: 10px;">
<option value="1">Select</option>
<option value="A_1.0">1.0</option>
<option value="A_1.5">1.5</option>
<option value="A_2.0">2.0</option>
<option value="A_2.5">2.5</option>
<option value="A_3.0">3.0</option>
<option value="A_3.5">3.5</option>
<option value="A_4.0">4.0</option>
</select></td>
<td>
<input class="demoField" name="skierStartDate1" size="8" type="text" value="" /></td>
<td>
<input class="demoField" name="skierEndDate1" size="8" type="text" value="" /></td>
<td>
<select class="demoField" name="skierType1" style="font-size: 10px;">
<option value="1">TBD*</option>
<option value="2">Type 1</option>
<option value="3">Type 2</option>
<option value="4">Type 3</option>
</select></td>
<td>
<select class="demoField" name="packageId_FK1" style="font-size: 10px;">
<option style="font-size: 10px;" value="1">Enter Skier Info
First</option>
<option style="font-size: 10px;" value="2">Adult Basic Ski Pkg
- $19</option>
<option style="font-size: 10px;" value="3">Junior Ski Pkg -
$11</option>
<option style="font-size: 10px;" value="4">Child Ski Pkg - $7
</option>
<option style="font-size: 10px;" value="5">Adult Performance
Ski Pkg - $23</option>
<option style="font-size: 10px;" value="6">High Performance
Ski Pkg - $27</option>
<option style="font-size: 10px;" value="7">Basic Snowboard Pkg
- $25</option>
<option style="font-size: 10px;" value="8">Performance Snowboard
Pkg - $32</option>
<option style="font-size: 10px;" value="9">Basic Snowblade Pkg
- $19</option>
<option style="font-size: 10px;" value="10">Upgrade Snowblade
Pkg - $21</option>
</select></td>
<td>
<input class="demoField" name="equipLength1" size="3" type="text" value="" /></td>
<td>
<input checked="checked" name="isInsurance1" type="checkbox" value="1" /></td>
<td class="demoField">$0.00</td>
<td><input name="extCost1" type="hidden" value="0" /></td>
</tr>
</table>
JavaScriptjQuery
Last Comment
Martin Davis