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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Oops
id attribute of the element isn't set. should be : this.name.
id attribute of the element isn't set. should be : this.name.
var id = this.name.replace(/\D+/,"");
ASKER
I Changed line 2: var id = this.name.replace(/\D+/,""
alert(id) returns a blank value, but no longer gives error.
alert(id) returns a blank value, but no longer gives error.
The code is based on the fact that each row contains elements age and skierType postfixed with a counter.
So: age0 and skierType0, age1 and skierType0, etc. like you posted in your code snippet.
Since the change event is bound to input elements which name starts with age, it gets the 'id' based on the logica you provided.
Perhaps there are some more elements which name attribute starts with age...
It would be helpfull if you post your HTML page or provide a link to it.
So: age0 and skierType0, age1 and skierType0, etc. like you posted in your code snippet.
Since the change event is bound to input elements which name starts with age, it gets the 'id' based on the logica you provided.
Perhaps there are some more elements which name attribute starts with age...
It would be helpfull if you post your HTML page or provide a link to it.
ASKER
I finally got it to work there where syntax errors keeping the code from running. Once I corrected those errors everything worked fine. Here is the code after I modified it. Once again thanks you saved me a lot of time. The array is from an JSON object.
$("input[name*='age']").bind("change",function () {
var id = this.name.replace(/\D+/,"");
changeSkierTypeList(id);
});
function changeSkierTypeList(listid) {
var listValue;
var listText;
var listOptions = getOptionsList(skierTypeObj);
// Get the selectbox based on the id
var ddl = $("select[name='skierType" + listid + "']").get(0);
if(ddl !== null) {
// Remove all options
ddl.length = 0;
for(var i = 0; listOptions.length - 1; i++){
ddl.options.add(new Option(listOptions[i].text, listOptions[i].value));
}
}
}
function getOptionsList(listTypeObj) {
var rules = listTypeObj.rules;
var lists = listTypeObj.lists;
var listname;
var rule;
var listOptions;
for(var i = 0; i < rules.length; i++){
if(eval(rules[i].rule)){
listname = rules[i].list;
listOptions = lists[0][listname];
break;
}
}
return listOptions;
}ASKER
Hey thanks for making this so easy to understand. This is just what I needed. Thanks
ASKER
gives an error "this.id is null or not an object"