2017-02-25 19 views
0

我有2下拉lists-選擇值

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

請幫助我。
謝謝。

+4

可能的重複[如何根據另一個下拉列表中的選擇選擇下拉列表中的選項](http://stackoverflow.com/questions/6965597/how-to-select-an-option-in- a-dropdown-list-based-a-selection-in-another-dropd) – hassan

回答

2

需要代碼如下:

$(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),僅將文本中的標識保存在idFromName變量中。如果ididFromName相等,則會將client_name下拉列表更改爲當前選擇。使用相同的邏輯,當client_name下拉列表發生更改時也會發生這種情況。

您可以在此JSFiddle中測試它。

來源:

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和名稱。

+1

感謝您的回覆,但這不起作用。 – Deepak

+0

我編輯它。現在不行嗎?檢查提供的JSFiddle。 – Thanasis

+0

我只是複製,粘貼你的代碼仍然無法正常工作。 – Deepak