select value of one dropdown based on another dropdown

Question

I have 2 dropdown lists-

1) First dropdown list for client ID

2) Second dropdown list for client name

What I want is when user selects client id then in the another dropdown client name should be selected who having that selected id.
Second Thing I want that If user selects client name then in the client id dropdown that client's client id should be selected.
What I have done so far-

<select class="form-control" id="client_id">
    <?php
         while($c_id=mysql_fetch_array($client_id))
           {
              echo "<option>".$c_id['ID']."</option>"; 
           }
     ?>
 </select>

 <select class="form-control" id="client_name">
     <?php
         while($c_name=mysql_fetch_array($client_name))
            {
                echo "<option value='".$c_name['ID']."'>".$c_name['display_name']."</option>";
            }
      ?>
 </select>  

Jquery -

$('#client_id').change(function(){
    //Client name should be select here base on selected id
}); 

$('#client_name').change(function(){
    //Client id should be select here base on selected client name
});  

Please help me.
Thanks.

Answer 1

You need the code below:

$(function() {
    $('#client_id').change(function(){
        id = $( "#client_id option:selected" ).text();
        $("#client_name > option").each(function() {
            name = this.text;
            idFromName = name.replace(/(^\d+)(.+$)/i,'$1');
            if (id == idFromName){
                $('#client_name').val(name);
            }
                });
    });

    $('#client_name').change(function(){
        name = $( "#client_name option:selected" ).text();
        idFromName = name.replace(/(^\d+)(.+$)/i,'$1');
        $("#client_id > option").each(function() {
            id = this.text;
            if (id == idFromName){
                $('#client_id').val(idFromName);
            }
                });
    });
});

In the code above, when the clinet_id dropdown is changed, the id of the selected option is kept in the id variable. Then it loops through the options of the other dropdown ( client_name ) and for every option the option's text is kept in the variable name . Then using regular expression (using this ) only the id from the text is kept in the idFromName variable. If the id and the idFromName are equal it changes the client_name dropdown to the current selection. With the same logic, this also happens when the client_name dropdown is changed.

You can test it in this JSFiddle .

Sources:

• How to select an option in a dropdown list based on a selection in another dropdown list
• Get the first Int(s) in a string with javascript
• Iterate through <select> options
• Set select option 'selected', by value
• http://learn.jquery.com/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option/

UPDATE

Here is a full working example:

<select id="client_id">
<option>125</option>
<option>53</option>
<option>7</option>
</select>

<select id="client_name">
<option>125>asd</option>
<option>53>rty</option>
<option>7>ruu</option>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
$(function() {
    $('#client_id').change(function(){
        id = $( "#client_id option:selected" ).text();
        $("#client_name > option").each(function() {
            name = this.text;
            idFromName = name.replace(/(^\d+)(.+$)/i,'$1');
            if (id == idFromName){
                $('#client_name').val(name);
            }
                });
    });

    $('#client_name').change(function(){
        name = $( "#client_name option:selected" ).text();
        idFromName = name.replace(/(^\d+)(.+$)/i,'$1');
        $("#client_id > option").each(function() {
            id = this.text;
            if (id == idFromName){
                $('#client_id').val(idFromName);
            }
                });
    });
});
</script>

Copy and paste this and make your adjustments for your ids and names.