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

我有一个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>';
}

我不知道该怎么解决这个问题。希望有人能给我指出正确的方向。

---

谢谢。

在两个选项变量中添加一个唯一属性选择选项后，在选择上调用一个JS函数选择该唯一属性值，并使用JS函数根据相应选择框的唯一属性值进行选择

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

$m=0；
而（$row=$results->fetch_数组（MYSQLI_NUM））{
//回显“”，打印（$row）。“”；
<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>

$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";  

$username.=“$row[1]\n”；
$email.=“$row[2]\n”；
$m++；
}

试试这个

改变

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

---

我们可以通过html5数据属性和jQuery来实现这一点

在生成下拉列表时，将数据属性数据userId分配给药剂，并将用户id分配给该属性。如果使用数据属性，则无需始终将用户id指定给该值

您的php代码应更改为以下内容

---

演示链接：

http://jsfiddle.net/Ld8660yx/

两个选定选项的值是多少？还始终添加呈现的html而不是服务器端代码您的代码似乎显示了一个选择项？？？@CerlinBoss使用呈现的

html

Great来回答我的问题。。。它的工作。非常感谢你的帮助

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

$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";  

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