我有3个下拉菜单:国家,州和城市。
州和城市依赖于之前的形式,并通过AJAX加载。
在Firefox和Chrome中,一切正常,但在我选择状态的IE(我的情况下是8)中,城市下拉列表未加载。就像IE没有检测到这种变化。这不是负载问题,因为我已经使用简单的警报框进行了测试。
任何帮助都将非常感激。
状态加载页面类似于:
<select id="woeid_state">
<option value="1">Alabama</option>
<option value="2">Florida</option>
</select>
城市加载页面类似于:
<select id="woeid_town">
<option value="100">Miami</option>
<option value="101">Orlando</option>
</select>
JS
$(document).ready(function()
{
function loadStates( parent_woeid )
{
$('#states').load("<?php echo $states_page?>"+parent_woeid);
return false;
}
function loadCities( parent_woeid )
{
$('#towns').load("<?php echo $cities_page;?>/admin1/"+parent_woeid);
return false;
}
$("#woeid_country").change(function()
{
//alert("I am an alert box");
var country = $("select#woeid_country").val();
loadStates ( country);
});
$("#states").change(function()
{
//alert("I am an alert box");
var admin1 = $("select#woeid_state").val();
loadCities ( admin1 );
});
});
表格:
<form class="ordinary_form" method="post" action="">
<label>Country</label>
<select name="woeid_country" id="woeid_country">
<option value="23424975">United Kingdom</option>
<option value="23424977">United States</option>
<option value="23424979">Uruguay</option>
<option value="23424980">Uzbekistan</option>
<option value="23424907">Vanuatu</option>
<option value="23424982">Venezuela</option>
<option value="23424984">Vietnam</option>
</select>
<label>State/Province</label>
<div id="states"></div>
<label>City</label>
<div id="towns"></div>
</form>
更新:使用JQuery 1.3
解决方案:由Daniel带来:替换.change的.change
答案 0 :(得分:2)
这是违反直觉的,但您需要使用.click()
代替.change()
。在下拉列表失去焦点之前,Internet Explorer不会触发change
事件,而其他浏览器会在每次值更改时触发change
。
请参阅此相关的Stack Overflow问题:Getting jQuery to recognise .change() in IE。
答案 1 :(得分:0)
这可能是因为您在原始javascript运行后加载状态(并分配.change()事件 使用
的形式$("select#woeid_state").live('change', function() {
var admin1 = $("select#woeid_state option:selected").val();
loadCities ( admin1 );
});
捕获select上的事件。 编辑:放入其余代码
替代注意事项:添加SELECT时添加事件:
function AddSelectStateEvent()
{
$("select#woeid_state").change(function() {
var admin1 = $("select#woeid_state option:selected").val();
loadCities ( admin1 );
});
};
并添加select:
AddSelectStateEvent();
注意:修复了.live(缺少逗号)
的第一个选项中的语法错误