CODEWITHSUNDEEP
javascriptphpjquerymysql
TNK
TNK

Reputation: 4333

Populate two drop down boxes and select matching items

I have a PHP page which contains two drop down lists. Data to drop downs come from my database.

This is my PHP for these drop down -

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

This is what the output from above PHP -

enter image description here

My question is, now I want to select email or username clicking on select item. when click on an email its username should be select automatically or when click on username its email should be select automatically. check below images for clearly understand.

enter image description here

UPDATE:

This is rendered HTML from above PHP -

<form action=""  method="post">
    <table>
        <tr><th>Emails</th><th>Username</th></tr>
        <tr>
            <td>
                <select size="4">
                    <option value="1">[email protected]</option>
                    <option value="2">[email protected]</option>
                    <option value="3">[email protected]</option>
                    <option value="4">[email protected]</option>
                    <option value="5">[email protected]</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>

I am not sure how to figure this out. Hope somebody will pointed me to right direction. Thank you.

Upvotes: 0

Views: 539

Answers (3)

Divakar Gujjala
Divakar Gujjala

Reputation: 803

We can achieve this with html5 data attributes and jQuery.

At the time of generating the dropdown's assign a data attribute data-userId to the potions and assign user id to this attribute. If you use the data attribute then there is no need for you to assign user id to the value all the time.

Your php code should be changed to some thing like the below.

$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 Code:

//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 Link: http://jsfiddle.net/Ld8660yx/

Upvotes: 1

Cerlin
Cerlin

Reputation: 6722

try this

change 

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

to

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

and then in jquery

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

Upvotes: 1

Jigar Patel
Jigar Patel

Reputation: 207

Add one unique attribute in both options variable call one JS function on select once the options is selected pick that unique attribute value and select according to that unique attribute value of respective Select BOX using JS function.

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

Upvotes: 0

Related Questions