Заполните два выпадающих списка и выберите подходящие элементы.

Question

У меня есть страница PHP, содержащая два раскрывающихся списка. Данные для выпадающих данных поступают из моей базы данных.

Это мой PHP для этих ниспадающего -

$results = $mysqli->query("SELECT id, username, email FROM members ORDER BY id ASC"); 

if ($results) { 
    $email = ''; 
    $username = ''; 

    while($row = $results->fetch_array(MYSQLI_NUM)) { 
     //echo '<pre>',print_r($row).'</pre>'; 
     $username .= "<option value=\"$row[0]\">$row[1]</option>\n"; 
     $email  .= "<option value=\"$row[0]\">$row[2]</option>\n"; 
    } 
} else { 
     $error_msg .= '<p class="error">Database error</p>'; 
} 

Это то, что выход из выше PHP -

Мой вопрос, теперь я хочу, чтобы выбрать адрес электронной почты или имя пользователя нажав на элемент select. при щелчке по электронной почте его имя пользователя должно быть выбрано автоматически или при нажатии на имя пользователя его электронный адрес следует выбирать автоматически. проверьте ниже изображения для четкого понимания.

UPDATE:

Это визуализируется HTML сверху PHP -

<form action="" method="post"> 
    <table> 
     <tr><th>Emails</th><th>Username</th></tr> 
     <tr> 
      <td> 
       <select size="4"> 
        <option value="1">test@example.com</option> 
        <option value="2">tharanga@gmail.com</option> 
        <option value="3">sisulka@gmail.com</option> 
        <option value="4">samadhi@gmail.com</option> 
        <option value="5">janaka@gmail.com</option> 
       </select> 
      </td> 
      <td> 
       <select size="4"> 
        <option value="1">test_user</option> 
        <option value="2">lankain</option> 
        <option value="3">chanidhima</option> 
        <option value="4">charitha</option> 
        <option value="5">nirosh</option> 
       </select> 
      </td> 
     </tr> 
     <tr><td><input type="submit" name="modify" value="Modify" /></td></tr> 
    </table> 
</form> 

Я не уверен, как это выяснить. Надеюсь, кто-то укажет мне в правильном направлении. Спасибо.

Answer 1

Мы можем достичь этого с помощью html5 атрибутов данных и jQuery.

Во время генерации выпадающего списка присваивается атрибут data-userId для зелий и присваивает идентификатор пользователя этому атрибуту. Если вы используете атрибут data, вам не нужно постоянно назначать идентификатор пользователя.

Ваш php-код должен быть заменен на некоторые вещи, как показано ниже.

$username .= "<option value=\"$row[0]\" data-userId=\"uid.$row[0]\">$row[1]</option>\n"; 
$email  .= "<option value=\"$row[0]\" data-userId=\"uid.$row[0]\">$row[2]</option>\n"; 

JQuery код:

//Get the user Id for the selected option and select the option in user name dropdown. 
$("#dduserEmail").on("change", function(){ 
    var usrId = $(this).find("option:selected").attr("data-userId"); 
    $("#dduserName option[data-userId="+usrId+"]").prop("selected", true); 
}); 

//Get the user Id for the selected option and select the option in user email dropdown. 
$("#dduserName").on("change", function(){ 
    var usrId = $(this).find("option:selected").attr("data-userId"); 
    $("#dduserEmail option[data-userId="+usrId+"]").prop("selected", true); 
}); 

Demo Ссылка:http://jsfiddle.net/Ld8660yx/

Answer 2

Добавить один уникальный атрибут в обеих параметрах. Вызовите одну функцию JS при выборе выбора, выберите это уникальное значение атрибута и выберите в соответствии с этим уникальным значением атрибута соответствующего Select BOX с помощью функции JS.

$m=0; 
while($row = $results->fetch_array(MYSQLI_NUM)) { 
     //echo '<pre>',print_r($row).'</pre>'; 
     $username .= "<option data_val_u=\"$m\" value=\"$row[0]\">$row[1]</option>\n"; 
     $email  .= "<option data_val_e=\"$m\" value=\"$row[0]\">$row[2]</option>\n"; 
$m++; 
    } 

Answer 3

попробовать этот

Смените

$username .= "<option value=\"$row[0]\">$row[1]</option>\n"; 
$email .= "<option value=\"$row[0]\">$row[2]</option>\n"; 

к

$username .= "<option value=\"$row[0]\" data-value=\"$row[2]\">$row[1]</option>\n"; 
$email .= "<option value=\"$row[0]\" data-value=\"$row[1]\">$row[2]</option>\n"; 

, а затем в JQuery

$('select').change(function(){ 
    var $this = $(this); 
    $('select').not($this).find('option').prop('selected', false).filter('[data-value="'+$this.val()+'"]').prop('selected', true); 
});