Автоматический выбор двух вариантов на основе раскрывающегося списка

У меня есть следующий 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>

Проблема, с которой я столкнулся, заключается в том, что это довольно сложный процесс принятия решения о том, кто и где принадлежит. Например: Если я выберу «Тэмми Сайзмор», я знаю, что она в Канзасе, в офисе A256. Если я выберу «Рона Джеффриса», я знаю, что он находится в штате Мэн в офисе Q161.

Я немного знаком с реализацией jQuery или JavaScript. Страница отображается с помощью PHP. Если это можно сделать в одном из них, я в порядке. Я просто не знаю, как это реализовать.

Есть ли эффективный способ сделать это?

Это интерфейс, поэтому вы будете использовать javascript. Вы можете создать обработчик событий для выбора, а затем изменить два других в зависимости от значения / параметра, выбранного пользователем.

Chad K 10.08.2018 16:44

Позвольте пользователю выбрать продавца, а при выборе сделайте запрос AJAX в вашу базу данных и получите его / ее состояние и номер. Обновите поля соответствующим образом

Tomasz Bubała 10.08.2018 17:33

Я понимаю необходимую концепцию, однако у меня нет опыта, чтобы ЗАПИСАТЬ необходимый JavaScript / jQuery, но если он уже существует, я могу заставить код работать.

Mr_Thomas 10.08.2018 17:55

У вас 7 человек, но 6 локаций и 6 O.Num. Как бы вы это объяснили и соединили их? Соединение (соединение) «меньше ко многим» (или «многие к меньшему») - если оно не является случайным - всегда будет первым в списке предпочтений в алфавитном порядке (или по внешнему виду HTML).

Roko C. Buljan 10.08.2018 18:20

то есть: допустим, что Мэри и Джерри оба в Огайо, верно, было бы несправедливо, если бы Дженни всегда была той, которая соответствует этому месту - первой.

Roko C. Buljan 10.08.2018 18:23

Я вычеркнул одно из имен из списка. Это взаимно однозначная связь с именем / штатом / номером офиса. Приношу свои извинения за путаницу.

Mr_Thomas 10.08.2018 18:31
0
6
39
2

Ответы 2

Вот обходной путь, который я придумал (на случай, если кому-то это пригодится):

При настройке раскрывающегося списка я объединил три элемента (имя, штат и номер офиса) в один 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];

Я бы рекомендовал не использовать атрибут 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>

Другие вопросы по теме