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 -

的输出

enter image description here

我的问题是，现在我想选择电子邮件或用户名点击选择项目。点击电子邮件时，应自动选择其用户名，或者点击用户名时，应自动选择其电子邮件。检查下面的图像清楚地了解。

enter image description here

更新

这是从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/

Answer 3

在两个选项变量中添加一个唯一属性调用一个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++;
    }

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

3 个答案: