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.

Possible duplicate of [How to select an option in a dropdown list based on a selection in another dropdown list](http://stackoverflow.com/questions/6965597/how-to-select-an-option-in-a-dropdown-list-based-on-a-selection-in-another-dropd) — hassan, Feb 25 '17 at 11:13

score 2 · Accepted Answer · edited May 23 '17 at 11:46

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:

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.

I edited it. Doesn't it work now either? Check the JSFiddle provided. — Thanasis1101, Feb 25 '17 at 11:59
See my update. I put this code in a file and when I test it it works. I can't understand why it doesn't work for you. Does the [JSFiddle](https://jsfiddle.net/a8je1t49/1) work? — Thanasis1101, Feb 25 '17 at 12:23

select value of one dropdown based on another dropdown

1 Answers1