setting value in complex structure
I've encountered a structure such as the one in the code snippet I'm pasting. How can I set the values within any of the dropdowns (region, building, or room). For example, I would like to set Building C as the selected item or set room to 444.
I would like to accomplish this using jquery.
I would like to accomplish this using jquery.
<div class="row">
<div class="grid1"> </div>
<div class="grid10">
<input style="height: 1px; width: 1px; border: medium none; padding: 0px; margin: 0px; visibility: hidden;" tabindex="-1" value="1|Building B|222" title="Region, Building, Room" id="room" class="manadd" type="hidden">
<table id="roomvaluelist" class="picktable valuelist">
<thead>
<tr>
<th>Region</th>
<th>Building</th>
<th>Room</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select tabindex="45" class="s_large vlistvalue" label="Region" nodbform="true" style="width:200px;">
<option value="">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td>
<select tabindex="46" class="s_small vlistvalue" label="Building" style="width:200px;">
<option value="">Select...</option>
<option value="Building A">Building A</option>
<option value="Building B">Building B</option>
<option value="Building C">Building C</option>
</select>
</td>
<td>
<input class="vlistvalue" tabindex="47" label="Room" style="width:300px;" type="text">
</td>
</tr>
</tbody>
</table>
</div>
</div>
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
1 give your elements id's (example: region_select, building_select, room_value)
2 add this jquery code
2 add this jquery code
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
$('#region_select').val('2');
$('#building_select').val('Building C');
$('#room_value').val('444');
});
</script>
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
$('#region_select').val('2');
$('#building_select').val('Building C');
$('#room_value').val('444');
});
</script>
<style type="text/css">
</style>
</head>
<body>
<div class="row">
<div class="grid1"> </div>
<div class="grid10">
<input style="height: 1px; width: 1px; border: medium none; padding: 0px; margin: 0px; visibility: hidden;" tabindex="-1" value="1|Building B|222" title="Region, Building, Room" id="room" class="manadd" type="hidden">
<table id="roomvaluelist" class="picktable valuelist">
<thead>
<tr>
<th>Region</th>
<th>Building</th>
<th>Room</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select id="region_select" tabindex="45" class="s_large vlistvalue" label="Region" nodbform="true" style="width:200px;" id="x">
<option value="">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td>
<select id="building_select" tabindex="46" class="s_small vlistvalue" label="Building" style="width:200px;">
<option value="">Select...</option>
<option value="Building A">Building A</option>
<option value="Building B">Building B</option>
<option value="Building C">Building C</option>
</select>
</td>
<td>
<input id="room_value" class="vlistvalue" tabindex="47" label="Room" style="width:300px;" type="text">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Premium Content
You need an Expert Office subscription to comment.Start Free Trial