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>

根据下拉列表自动选择两个选项

2 个答案: