如何在两个相关的选择字段上允许独立的jquery动作？ [英] How to allow independent jquery actions on two dependent select fields?
本文介绍了如何在两个相关的选择字段上允许独立的jquery动作？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< form 我有两个选择（城市，建筑物）取决于用户为状态选择的内容。方法= POST >
< div class =summary>
< div class =trip>
<选项已禁用>选择一个状态< / option>
< option>加利福尼亚< / option>
< option>纽约< / option>
< / select>
< option value =Z>选择城市< / option>
< / select>
< option value =Z>选择建筑物< / option>
< / select>
< br>< br>
< / div>
< / div>
城市和建筑物从ajax调用拉动为json。
jQuery：
$（document）.ready（function（）{
var additional = $（'。trip'）。html（）;
$（'＃result'）。hide（）;
$（'form'）。on（change，select，function （）{
var current_index = $（this）.index（）;
if（$（this）.eq（current_index）.val（）=='Z'）{$ （$。'city'）。eq（current_index）.html（< option>选择票价< / option>）;
$（'。city'）。eq（current_index）。 （''''）;
$（'。building'）。eq（current_index）.html（< option>选择票价< / option>）;
$（' .build'）。eq（current_index）.attr（'disabled'，true）;
}
else {
var stateid = $（this）.val（）;
var current = $（this）;
$ .getJSON（'get_city /'，{state_id：stateid}，function（data）{
var options_city ='< option value =Z>塞莱ct a city< / option>';
for（var i = 0; I< data.length; i ++）{
options_city + ='< option value =''+ data [i] .pk +'>'+ data [i] .fields ['name'] +'< / option>';
}
current.siblings（'。city'）。html（options_city）;
current.siblings（'。city option：first'）。attr（'selected'，'selected'）;
current.siblings（'。city'）。attr（'disabled'，false）;
}）;
$ .getJSON（'get_building /'，{state_id：stateid}，function（data）{
var options_building ='< option value =Z>选择建筑物< / option>' ;
for（var i = 0; i< data.length; i ++）{
options_building + ='< option value =''+ data [i] .pk +'>'+ data [ i] .fields ['building'] +< / option>';
}
current.siblings（'。building'）。html（options_building）;
current.siblings（' （''''，'选择'）;
current.siblings（'。building'）。attr（'disabled'，false）;
}）;
}
}）; $（$＃$ b $（'＃add'）。click（function（）{
if（$（'。summary'）。children（）。length> = 4）return;
$（ '.summary'）。append（'< div class =trip>'+ additional +< div>）;
}）;
}）;
json AJAX的城市输出如下所示：
< option value =1>纽约市< / option>
< option value =2> Albany< / option>
同样的建筑物：
< option value =1>帝国大厦< / option>
< option value =2> Penn Station< / option>
这里的问题是，当我选择一个城市时，建筑物选择框会重置并且所有选项消失。我知道这是因为两个getjson调用处于相同的功能。我如何做到这一点，以便城市和建筑的选择是相互独立的？
jsFiddle在这里没有用处，但我也包含它。
p> https://jsfiddle.net/1mxrs8yq/ =nofollow noreferrer> https://jsfiddle.net/1mxrs8yq/3/
< script src =https：/ /ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><form method =post> < div class =summary> < div class =trip> < select name =Stateclass =state> <选择已禁用>选择一个状态< / option> <选项>加州< /选项> < option>纽约< / option> < /选择> < select name =Cityclass =citydisabled =true> < option value =Z>选择城市< / option> < /选择> < select name =Buildingclass =buildingdisabled =true> < option value =Z>选择建筑物< / option> < /选择> <峰; br><峰; br> < / DIV> < / DIV> < button type =buttonid =add>添加另一个旅程< /按钮>
$ b
在解决方案中，我将getJSON注释掉了。并假设数据将以某种格式。而不是getJSON数据，我创建了两个变量数据& data1 for 城市&分别为建筑物下拉菜单。
I have two selection (city, building) is the dependent on what the users choose for state.
<form method="post">
<div class="summary">
<div class="trip">
<select name="State" class="state">
<option selected disabled>Choose a State</option>
<option>California</option>
<option>New York</option>
</select>
<select name="City" class="city" disabled="true">
<option value="Z">Select a city</option>
</select>
<select name="Building" class="building" disabled="true">
<option value="Z">Select a building</option>
</select>
<br><br>
</div>
</div>
City and building is pull as json from an ajax call.
jQuery:
$(document).ready(function() {
var additional = $('.trip').html();
$('#result').hide();
$('form').on("change", "select", function(){
var current_index = $(this).index();
if($(this).eq(current_index).val() == 'Z') {
$('.city').eq(current_index).html("<option>Select a fare</option>");
$('.city').eq(current_index).attr('disabled', true);
$('.building').eq(current_index).html("<option>Select a fare</option>");
$('.building').eq(current_index).attr('disabled', true);
}
else {
var stateid = $(this).val();
var current = $(this);
$.getJSON('get_city/', {state_id: stateid}, function(data) {
var options_city = '<option value="Z">Select a city</option>';
for(var i=0; i<data.length; i++){
options_city+='<option value="'+data[i].pk+'">'+data[i].fields['name']+'</option>';
}
current.siblings('.city').html(options_city);
current.siblings('.city option:first').attr('selected', 'selected');
current.siblings('.city').attr('disabled', false);
});
$.getJSON('get_building/', {state_id: stateid}, function(data) {
var options_building = '<option value="Z">Select a building</option>';
for(var i=0; i<data.length; i++){
options_building+='<option value="'+data[i].pk+'">'+data[i].fields['building']+</option>';
}
current.siblings('.building').html(options_building);
current.siblings('.building option:first').attr('selected', 'selected');
current.siblings('.building').attr('disabled', false);
});
}
});
$('#add').click(function() {
if ($('.summary').children().length >= 4) return;
$('.summary').append('<div class="trip">' + additional + "<div>");
});
});
The output of the json AJAX for city looks like:
<option value="1">New York City</option>
<option value="2">Albany</option>
Similarly for buildings:
<option value="1">Empire State Building</option>
<option value="2">Penn Station</option>
The issue here is that when I select a city, the building select box resets and all of the options disappears. I know this is because the two getjson call is in the same function. How do I make it so that the selection of city and building are independent from each other?
jsFiddle is not that useful here but I have included it as well.
https://jsfiddle.net/1mxrs8yq/
解决方案
Here you go with the solution https://jsfiddle.net/1mxrs8yq/3/
$(document).ready(function() {
var additional = $('.trip').html();
$('#result').hide();
$('form').on("change", "select[name='State']", function(){
var current_index = $(this).index();
if($(this).eq(current_index).val() == 'Z') {
$('.city').eq(current_index).html("<option>Select a fare</option>");
$('.city').eq(current_index).attr('disabled', true);
$('.building').eq(current_index).html("<option>Select a fare</option>");
$('.building').eq(current_index).attr('disabled', true);
}
else {
var stateid = $(this).val();
var current = $(this);
var data = [{
pk: 1,
name: 'New York'
},
{
pk: 2,
name: 'Test2'
}];
//$.getJSON('get_city/', {state_id: stateid}, function(data) {
var options_city = '<option value="Z">Select a city</option>';
for(var i=0; i<data.length; i++){
options_city+='<option value="'+data[i].pk+'">'+data[i]['name']+'</option>';
}
$(this).next().html(options_city);
$(this).next()[0].selectedIndex = 0;
$(this).next().attr('disabled', false);
// });
var data1 = [{
pk: 1,
building: 'test24'
},
{
pk: 2,
building: 'test78'
}];
//$.getJSON('get_building/', {state_id: stateid}, function(data) {
var options_building = '<option value="Z">Select a building</option>';
for(var i=0; i<data1.length; i++){
options_building+='<option value="'+data1[i].pk+'">'+data1[i]['building']+'</option>';
}
$(this).next().next().html(options_building);
$(this).next().next()[0].selectedIndex = 0;
$(this).next().next().attr('disabled', false);
//});
}
});
$('#add').click(function() {
if ($('.summary').children().length >= 4) return;
$('.summary').append('<div class="trip">' + additional + "<div>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<div class="summary">
<div class="trip">
<select name="State" class="state">
<option selected disabled>Choose a State</option>
<option>California</option>
<option>New York</option>
</select>
<select name="City" class="city" disabled="true">
<option value="Z">Select a city</option>
</select>
<select name="Building" class="building" disabled="true">
<option value="Z">Select a building</option>
</select>
<br><br>
</div>
</div>
<button type="button" id="add">Add another trip</button>
In the solution I have commented out the getJSON. and assume the data would be in certain format. Instead of getJSON data I create two variable data & data1 for city & building dropdowns respectively.
这篇关于如何在两个相关的选择字段上允许独立的jquery动作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
