Internet Explorer无法从下拉菜单中的xml文件中获取所有数据
Internet Explorer无法从下拉菜单中的xml文件中获取所有数据
提问于 2015-09-16 01:41:11
这段Javascript代码在chrome和Firefox中运行良好，但它只显示Internet Explorer中“学校/大学”下拉框的第一项。你们在这段代码中看到IE不喜欢的地方了吗？
HTML：
<label>School/College:</label>
<select class='mktFormSelect mktFReq' name="School_College_RFI__c_contact" id="School_College_RFI__c_contact" size='1' tabIndex='19'>
<option value='' selected='selected'></option>
</select>
<label>Academic Program:</label>
<select class='mktFormSelect mktFReq' name="Academic_Program_RFI__c" id="Academic_Program_RFI__c" size='1' tabIndex='20'>
<option value='' selected='selected'></option></select>
<label>Academic Career:</label>
<select class='mktFormSelect mktFReq' name="Academic_Career_RFI__c" id="Academic_Career_RFI__c" size='1' tabIndex='21'>
<option value='' selected='selected'></option>
</select>
<label>Academic Plan of Interest:</label>
<select class='mktFormSelect mktFReq' name="Academic_Plan_of_Interest_RFI__c" id="Academic_Plan_of_Interest_RFI__c" size='1' tabIndex='22'>
<option value='' selected='selected'></option>
</select>JavaScript
<script type="text/javascript" id='autocomplete'>
<!-- Dropdowns -->
$jQ(document).ready(function() {
$jQ.ajax({
url: "url",
dataType: "xml",
success: function( xmlResponse ) {
$jQ('#School_College_RFI__c_contact option').remove();
$jQ('#School_College_RFI__c_contact').append('<option>Please Select</option>');
$jQ(xmlResponse).find('school').each(function(){
sc = $jQ(this).find('sname').text();
$jQ('#School_College_RFI__c_contact').append('<option value="'+sc+'" >'+sc+'</option>');
console.log(sc);
});
}
});
$jQ('#School_College_RFI__c_contact').change(function(){
var ap;
var college = $jQ(this).val();
$jQ('#Academic_Program_RFI__c option').remove();
$jQ('#Academic_Career_RFI__c option').remove();
$jQ('#Academic_Plan_of_Interest_RFI__c option').remove();
$jQ.ajax({
url: "url",
dataType: "xml",
success: function( xmlResponse ) {
$jQ(xmlResponse).find('sname').each(function(){
if($jQ(this).text() == college){
$jQ('#Academic_Program_RFI__c').append('<option>Please Select</option>');
$jQ(this).siblings('academic_program').each(function(){
ap = $jQ(this).find('pname').text();
$jQ('#Academic_Program_RFI__c').append('<option value="'+ap+'" >'+ap+'</option>');
});
}
});
}
});
}).trigger('change');
$jQ('#Academic_Program_RFI__c').change(function(){
var ac;
var academic_program = $jQ(this).val();
$jQ('#Academic_Career_RFI__c option').remove();
$jQ('#Academic_Plan_of_Interest_RFI__c option').remove();
$jQ.ajax({
url: "url",
dataType: "xml",
success: function( xmlResponse ) {
$jQ(xmlResponse).find('pname').each(function(){
if($jQ(this).text() == academic_program){
$jQ('#Academic_Career_RFI__c').append('<option>Please Select</option>');
$jQ(this).siblings('academic_career').each(function(){
ac = $jQ(this).find('cname').text();
$jQ('#Academic_Career_RFI__c').append('<option value="'+ac+'" >'+ac+'</option>');
});
}
});
}
});
}).trigger('change');
$jQ('#Academic_Career_RFI__c').change(function(){
var ai;
var academic_career = $jQ(this).val();
$jQ('#Academic_Plan_of_Interest_RFI__c option').remove();
$jQ.ajax({
url: "url",
dataType: "xml",
success: function( xmlResponse ) {
$jQ(xmlResponse).find('cname').each(function(){
if($jQ(this).text() == academic_career){
$jQ('#Academic_Plan_of_Interest_RFI__c').append('<option>Please Select</option>');
$jQ(this).siblings('academic_plan_of_interest').children('value').each(function(){
ai = $jQ(this).text();
$jQ('#Academic_Plan_of_Interest_RFI__c').append('<option value="'+ai+'" >'+ai+'</option>');
});
}
});
}
});
}).trigger('change');
});
</script>回答 2
Stack Overflow用户
发布于 2015-09-16 02:01:11
是。IE在动态构建下拉菜单时存在一些固有的错误。我认为这与IE绘制下拉列表的能力有关。有两种方法可以解决这个问题：
- 将
display的down css属性设置为none，构造下拉列表，然后删除displayproperty.
- Force IE以使用类似于
$("select").width($("select").width());
的代码再次构造select
有关此问题的更多信息，请单击此处：
- https://www.getharvest.com/blog/2009/12/dropdown-problems-on-internet-explorer/
- only shows first char of selected option
编辑:下面是一个示例
选项1：
$jQ.ajax({
url: "url",
dataType: "xml",
success: function( xmlResponse ) {
$jQ('#School_College_RFI__c_contact option').remove();
$jQ('#School_College_RFI__c_contact').hide();
$jQ('#School_College_RFI__c_contact').append('<option>Please Select</option>');
$jQ(xmlResponse).find('school').each(function(){
sc = $jQ(this).find('sname').text();
$jQ('#School_College_RFI__c_contact').append('<option value="'+sc+'" >'+sc+'</option>');
console.log(sc);
});
$jQ('#School_College_RFI__c_contact').show();
}
});选项2：
$jQ.ajax({
url: "url",
dataType: "xml",
success: function( xmlResponse ) {
$jQ('#School_College_RFI__c_contact option').remove();
$jQ('#School_College_RFI__c_contact').append('<option>Please Select</option>');
$jQ(xmlResponse).find('school').each(function(){
sc = $jQ(this).find('sname').text();
$jQ('#School_College_RFI__c_contact').append('<option value="'+sc+'" >'+sc+'</option>');
console.log(sc);
});
$jQ('#School_College_RFI__c_contact').width($jQ('#School_College_RFI__c_contact').width());
}
});注:未测试。假设代码在Firefox和Chrome中运行良好(正如OP所说)
Stack Overflow用户
发布于 2015-09-16 22:16:56
这就是对我有效的方法。实际上，我不得不修改整个代码：
window.onload = function () {
if (window.XMLHttpRequest) {
my_xml = new XMLHttpRequest();
} else {
my_xml = new ActiveXObject("Microsoft.XMLHTTP");
}
/////////////////////////////
my_xml.open("GET", 'http://go.miami.edu/rs/universityofmiami/images/Recruitment_Profile_Mapping_Undergraduate_1014.xml', false);
my_xml.send();
xml_str = my_xml.responseXML;
var x = xml_str.getElementsByTagName("sname");
var min = 12,
max = 100,
select = document.getElementById('School_College_RFI__c_contact');
for (i = 0; i < x.length; i++) {
var opt = document.createElement('option');
opt.value = x[i].childNodes[0].nodeValue;
opt.innerHTML = x[i].childNodes[0].nodeValue;
select.appendChild(opt);
}
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32592411
复制相关文章
相似问题
腾讯云开发者
