根据另一个下拉列表选择一个下拉列表的值

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中。然后，使用正则表达式（使用此）仅将文本ID保存在idFromName变量中。如果id和idFromName相等，则将client_name下拉列表更改为当前选择。具有相同的逻辑，当client_name下拉列表更改时也会发生这种情况。

您可以在此JSfiddle中对其进行测试。

来源：

• 如何基于另一个下拉列表中选择的下拉列表中的选项
• 在带有JavaScript的字符串中获取第一个INT
• 通过＆lt; select＆gt;选项
• 设置选择选项"选择"，按值
• http://learn.jquery.com/ususion-jquery-core/faq/how-do-do-i-------------------------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和名称进行调整。