填充两个下拉框并选择匹配项

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的输出-

我的问题是，现在我要选择电子邮件或用户名，然后单击选择项。 当单击电子邮件时，应自动选择其用户名，或单击用户名时，应自动选择其电子邮件。 检查以下图像以清楚了解。

更新：

这是从PHP上方渲染的HTML-

<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

尝试这个

更改

$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);
});

Answer 2

我们可以使用html5 数据属性和jQuery实现此目的。

在生成下拉菜单时，将数据属性data-userId分配给药水，并将用户id分配给该属性。 如果使用data属性，则无需一直将用户ID分配给该值。

您的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);
});

演示链接： http://jsfiddle.net/Ld8660yx/ : http://jsfiddle.net/Ld8660yx/

Answer 3

在两个选项变量中添加一个唯一属性，一旦选择了选项，就在选择上调用一个JS函数，选择该唯一属性值，并使用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++;
    }