根據下拉列表自動選擇兩個選項

Question

我有以下HTML代碼來選擇推銷員，州和辦公室號碼。 我想要做的是選擇推銷員，並自動為該人選擇州和辦公室編號：

<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>

我遇到的問題是，對於誰屬於哪里，這是一個相當復雜的決策過程。 例如：如果我選擇“ Tammy Sizemore”，我知道她在堪薩斯州A256辦公室。 如果我選擇“羅恩·傑弗里斯”，我知道他在緬因州Q161辦公室。

我對實現jQuery或JavaScript有點熟悉。 該頁面由PHP呈現。 如果可以通過其中一種方法完成，那很好。 我只是不知道如何實現這一點。

有一種有效的方法可以做到這一點嗎？

Answer 1

這是我想出的解決方法（以防其他人覺得方便）：

設置下拉列表時，我將三個元素（名稱，州和辦公室編號）組合為一個value但僅顯示了銷售員姓名。

<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>

然后，當我需要將它們拆分回單獨的字段時，我使用explode 。

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

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

Answer 2

我建議您不要像在變通解決方案中那樣使用value屬性，因為您基本上將value屬性用於除其預期用途之外的其他用途。 您可以使用完美的自定義數據屬性...

 // 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>