根據另一個下拉列表選擇一個下拉列表的值

Question

我有2個下拉列表-

1）客戶ID的第一個下拉列表

2）客戶名稱的第二個下拉列表

我想要的是，當用戶選擇客戶端ID時，應在另一個下拉列表中選擇具有該ID的客戶端名稱。
我想要的第二件事如果用戶選擇客戶端名稱，則應在客戶端ID下拉列表中選擇該客戶端的客戶端ID。
我到目前為止所做的

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

請幫我。
謝謝。

Answer 1

您需要以下代碼：

$(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);
            }
                });
    });
});

在上面的代碼中，當clinet_id下拉列表更改時，所選選項的id保留在id變量中。 然后，它遍歷另一個下拉列表的選項（ client_name ），對於每個選項，選項的文本都保留在變量name 。 然后使用正則表達式（使用this ），僅將文本中的id保留在idFromName變量中。 如果id和idFromName相等，則它將client_name下拉列表更改為當前選擇。 按照相同的邏輯，更改client_name下拉列表時也會發生這種情況。

您可以在此JSFiddle中對其進行測試。

資料來源：

• 如何基於另一個下拉列表中的選擇來選擇下拉列表中的選項
• 使用javascript獲取字符串中的第一個Int
• 遍歷<select>選項
• 按值設置選擇選項“已選擇”
• http://learn.jquery.com/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option/

UPDATE

這是一個完整的工作示例：

<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>

復制並粘貼此文件，然后對您的ID和名稱進行調整。