[英]select value of one dropdown based on another dropdown
I have 2 dropdown lists- 我有2个下拉列表-
1) First dropdown list for client ID
1)客户ID的第一个下拉列表
2) Second dropdown list for client name
2)客户名称的第二个下拉列表
What I want is when user selects client id then in the another dropdown client name should be selected who having that selected id. 我想要的是,当用户选择客户端ID时,应在另一个下拉列表中选择具有该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. 我想要的第二件事如果用户选择客户端名称,则应在客户端ID下拉列表中选择该客户端的客户端ID。
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 - 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. 谢谢。
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. 在上面的代码中,当
clinet_id
下拉列表更改时,所选选项的id
保留在id
变量中。 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
. 然后,它遍历另一个下拉列表的选项(
client_name
),对于每个选项,选项的文本都保留在变量name
。 Then using regular expression (using this ) only the id from the text is kept in the idFromName
variable. 然后使用正则表达式(使用this ),仅将文本中的id保留在
idFromName
变量中。 If the id
and the idFromName
are equal it changes the client_name
dropdown to the current selection. 如果
id
和idFromName
相等,则它将client_name
下拉列表更改为当前选择。 With the same logic, this also happens when the client_name
dropdown is changed. 按照相同的逻辑,更改
client_name
下拉列表时也会发生这种情况。
You can test it in this JSFiddle . 您可以在此JSFiddle中对其进行测试。
Sources: 资料来源:
UPDATE 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. 复制并粘贴此文件,然后对您的ID和名称进行调整。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.