setting value in complex structure

mock5c
mock5c used Ask the Experts™
on
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.

<div class="row">
    <div class="grid1">&nbsp;</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>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
1 give your elements id's (example: region_select, building_select, room_value)
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>

Open in new window

full listing here
<!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">&nbsp;</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>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial