我有两个选择(城市,建筑)是依赖于用户选择的状态。
城市和建筑物从ajax呼叫中拉出json。
jQuery的:
$(document).ready(function() { var additional = $('.trip').html(); $('#result').hide(); $('form').on("change", "select", function(){ var current_index = $(this).index(); if ($(this).is('.state')) { var stateid = $(this).val(); } else { var stateid = $(this).siblings('.state').val(); }; if($(this).eq(current_index).val() == 'Z') { $('.city').eq(current_index).html("Select a fare"); $('.city').eq(current_index).attr('disabled', true); $('.building').eq(current_index).html("Select a fare"); $('.building').eq(current_index).attr('disabled', true); } else { var current = $(this); $.getJSON('get_city/', {state_id: stateid}, function(data) { var options_city = 'Select a city'; for(var i=0; i<data.length; i++){ options_city+=''+data[i].fields['name']+''; } 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 = 'Select a building'; for(var i=0; i<data.length; i++){ options_building+=''+data[i].fields['building']+'; } 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('' + additional + ""); }); });
json AJAX for city的输出如下:
New York City Albany
同样对于建筑物:
Empire State Building Penn Station
这里的问题是,当我选择一个城市时,建筑物选择框会重置,所有选项都会消失。 我知道这是因为两个getjson调用是在同一个函数中。 我如何做到这样,城市和建筑的选择是相互独立的?
一旦状态被更改并选择,我只需要调用$ .getjson一次,直到有人再次更改状态值。
以下是“重置”城市和构建复选框的相关代码:
$('form').on("change", "select", function(){ var current_index = $(this).index(); if($(this).eq(current_index).val() == 'Z') { } else { current.siblings('.city option:first').attr('selected', 'selected'); current.siblings('.building option:first').attr('selected', 'selected'); } });
因此,每当您更改任何下拉列表时,只要该值不是Z
,您就可以将城市和州设置为第一个选项。
而不是做$('form').on("change", "select", function(){})
然后if
语句为每个输入,为什么不直接监视每个输入的change事件:
如果您想根据州下拉列表填充城市并建立下拉列表,并且在更改城市和建筑物下拉列表时不执行任何操作,您可以执行以下操作:
$('form').on("change", "#selState", function(){ //get state id var stateid = $(this).val(); //Get cities for selected state $.getJSON('get_city/', {state_id: stateid}, function(data) { //add "Select a city option" $('#selCity').html(''); //Loop through returned cities. for(var i=0; i'+data[i].fields['name']+''); } }); //Get buildings for selected state $.getJSON('get_building/', {state_id: stateid}, function(data) { //add "Select a building option" $('#selCity').html(''); //Loop through returned buildings. for(var i=0; i'+data[i].fields['name']+''); } }); //enable other select $('#selCity').attr('disabled', false); $('#selBuilding').attr('disabled', false); })
以上就是jQuery教程分享选择一个选项是重置另一个依赖选择框相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/558713.html
赞 (0)
c/c++语言开发共享putc和ungetc有什么区别?
上一篇
2021年1月27日
c/c++语言开发共享地址长度的字符串文字
下一篇
2021年1月27日