Auto select two options based on drop-down list

Question

I have the following HTML code to select Salesman, State, and Office Number. What I want to be able to do is select the Salesman and have it auto select the State and Office Number for that person:

<label for="saleman">Senior Agent: </label>
<select id="salesman" name="salesman">
        <option value="" selected="selected"></option>
        <option value="Tammy Sizemore">Tammy Sizemore</option>
        <option value="Ron Jeffries">Ron Jeffries</option>
        <option value="Tony Clark">Tony Clark</option>
        <option value="Mark Sengala">Mark Sengala</option>
        <option value="Judy Donato">Judy Donato</option>
        <option value="Mary Porter">Mary Porter</option>            
</select>

<label for="state">State: </label>
<select id="state" name="state">
        <option value="" selected="selected"></option>
        <option value="Iowa">Iowa</option>
        <option value="Kansas">Kansas</option>
        <option value="Maine">Maine</option>
        <option value="Ohio">Ohio</option>
        <option value="Pennsylvania">Pennsylvania</option>
        <option value="West Virginia">West Virginia</option>
</select>

<label for="number">Office Number: </label>
<select id="number" name="number">
        <option value="" selected="selected"></option>
        <option value="A219">A219</option>
        <option value="A256">A256</option>
        <option value="G019">G019</option>
        <option value="G222">G222</option>
        <option value="Q161">Q161</option>
        <option value="Q341">Q341</option>
</select>

The problem I'm having is that it's a fairly complex decision process as to who belongs where. For example: If I select 'Tammy Sizemore', I know she's in Kansas in office A256. If I select 'Ron Jeffries', I know he's in Maine at office Q161.

I'm somewhat familiar with implementing jQuery or JavaScript. The page is being rendered by PHP. If it can be done in one of those, I'm fine. I just don't know how to implement this.

Is there an efficient way to do this?

Answer 1

Here's the work-around I came up with (in case someone else finds this handy):

When setting up the drop-down list, I combined the three elements (Name, State, and Office Number) into a single value but only showed the Salesman name.

<label for="saleman">Senior Agent: </label>
<select id="salesman" name="salesman">
        <option value="" selected="selected"></option>
        <option value="Tammy Sizemore,Kansas,A256">Tammy Sizemore</option>
        <option value="Ron Jeffries,Maine,Q161">Ron Jeffries</option>
        <option value="Tony Clark,West Virginia,G019">Tony Clark</option>
        <option value="Mark Sengala,Ohio,Q341">Mark Sengala</option>
        <option value="Judy Donato,Iowa,A219">Judy Donato</option>
        <option value="Mary Porter,Pennsylvania,G222">Mary Porter</option>
</select>

Then, when I needed to split them back into separate fields, I used explode .

$sr_agent = $_POST['salesman'];
$sa = explode(',', $sr_agent);

$agent_name = $sa[0];
$agent_state = $sa[1];
$agent_office = $sa[2];

Answer 2

I'd recommend not using the value attribute as you did in your work-around solution, as you're basically using the value attribute for something other than its intended use. You can use custom data attributes that are perfect for this...

 // cache the state & office elements so we don't have to search the DOM every time var $state = $("#state"); var $office = $("#office"); $("#salesman").on("change", function() { // find the selected option var $selected = $(this).find("option:selected"); // get the associated state and office... var state = $selected.data("state"); var office = $selected.data("office"); // set the dropdowns $state.val(state); $office.val(office); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <label for="saleman">Senior Agent: </label> <select id="salesman" name="salesman"> <option value="" selected="selected"></option> <option value="Tammy Sizemore" data-state="Kansas" data-office="A256">Tammy Sizemore</option> <option value="Ron Jeffries" data-state="Maine" data-office="Q161">Ron Jeffries</option> <option value="Tony Clark" data-state="West Virginia" data-office="G019">Tony Clark</option> <option value="Mark Sengala" data-state="Ohio" data-office="Q341">Mark Sengala</option> <option value="Judy Donato" data-state="Iowa" data-office="A219">Judy Donato</option> <option value="Mary Porter" data-state="Pennsylvania" data-office="G222">Mary Porter</option> </select> <label for="state">State: </label> <select id="state" name="state"> <option value="" selected="selected"></option> <option value="Iowa">Iowa</option> <option value="Kansas">Kansas</option> <option value="Maine">Maine</option> <option value="Ohio">Ohio</option> <option value="Pennsylvania">Pennsylvania</option> <option value="West Virginia">West Virginia</option> </select> <label for="office">Office Number: </label> <select id="office" name="office"> <option value="" selected="selected"></option> <option value="A219">A219</option> <option value="A256">A256</option> <option value="G019">G019</option> <option value="G222">G222</option> <option value="Q161">Q161</option> <option value="Q341">Q341</option> </select>