我有一个文本框和一个DropDownList。 DropDownList根据文本框中的输入填充。我在DropDownList没有正确填充的地方有一些问题。
一种是当我在文本框中输入内容时,我可以选择DropDownList并正确填充它。但是,如果我决定要更改文本框中的内容并在其中键入其他内容,然后尝试再次标记到DropDownList,则不会更新。
另一个问题是,当我开始在文本框中输入时,我会弹出一个自动完成列表,我可以单击一个选项让它为我填充文本框,但是当我这样做时,DropDownList没有被填充。
这是我必须填充DropDownList的javascript。
$('#textFrame').live('change', function (event) {
$.ajax({
type: 'POST',
url: '@Url.Action("GetDirectors", "HostScan")',
data: { frame: $(this).val() },
success: function (data) {
var markup = '';
for (var x = 0; x < data.length; x++) {
markup += '<option value="' + data[x].Value + '">' + data[x].Text + '</option>';
}
$('#DirectorList').html(markup).show();
}
});
});
我应该做些什么来改变它?
提前感谢您的帮助!
答案 0 :(得分:0)
第一件事是.live从jQuery 1.7.0开始被弃用。请尝试使用.on。
其次使用google cdn托管的jQuery文件..这将有助于降低网站的带宽。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
至于代码,请在添加新值之前清除选项。这可确保您不会为以前的选项添加新选项。
$(function(){
$('#textFrame').on('change', function () {
$.ajax({
type: 'POST',
url: '@Url.Action("GetDirectors", "HostScan")',
data: { frame: $(this).val() },
success: function (data) {
if(data != null){
var markup = '';
$('#DirectorList').find('option').remove();
for (var x = 0; x < data.length; x++) {
markup += '<option value="' + data[x].Value + '">' + data[x].Text + '</option>';
}
$('#DirectorList').append(markup).show();
}
}
});
});
});