填充两个下拉框和 select 个匹配项

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 电子邮件或用户名点击 select 项目。单击电子邮件时，其用户名应自动为 select，或者单击用户名时，其电子邮件应自动为 select。检查下面的图片以便清楚地理解。

更新：

这是从上方 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

在两个选项变量中添加一个唯一属性，在 select 上调用一个 JS 函数，一旦选项 selected 选择该唯一属性值，并 select 根据该唯一属性值使用 JS 函数的各个 Select BOX。

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

试试这个

改变

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

我们可以通过 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);
});

演示 Link: http://jsfiddle.net/Ld8660yx/

填充两个下拉框和 select 个匹配项

Populate two drop down boxes and select matching items

javascript

php

mysql

jquery