在动态加载的选择框中选择选项

时间:2014-07-01 09:18:10

标签: jquery asp.net html-select webmethod

我有两个选择框:

  <select id="ddlLanguage">
        </select>
        <select id="ddlLanguage2">
            <option value="C#">C#</option>
            <option value="Java">Java</option>
            <option value="PHP">PHP</option>
             <option value="VB.NET">VB.NET</option>
            <option value="JavaScript">JavaScript</option>
            <option value="jQuery">jQuery</option>
        </select>

我有这个web方法来加载第一个选择框

   <script language="javascript" type="text/javascript">
        $(document).ready(function() {
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetLanguageList",
                data: '',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(msg) {
                    $("#ddlLanguage").empty().append($("<option></option>").val("[-]").html("Please select"));
                    $.each(msg.d, function() {
                        $("#ddlLanguage").append($("<option></option>").val(this['Value']).html(this['Text']));
                    });
                },
                error: function() {
                    alert("An error has occurred during processing your request.");
                }
            });

             $('#ddlLanguage').val('PHP');
        $('#ddlLanguage2').val('PHP');

        });
</script>

这里是webmethod:

[WebMethod()]
    public static ArrayList GetLanguageList()
    {
        ArrayList lstArrLanguage = new ArrayList();
        lstArrLanguage.Add(new ListItem("C#", "C#"));
        lstArrLanguage.Add(new ListItem("Java", "Java"));
        lstArrLanguage.Add(new ListItem("PHP", "PHP"));
        lstArrLanguage.Add(new ListItem("VB.NET", "VB.NET"));
        lstArrLanguage.Add(new ListItem("JavaScript", "JavaScript"));
        lstArrLanguage.Add(new ListItem("jQuery", "jQuery"));
        return lstArrLanguage;
    }

正如您在文档准备好之前所见,我这样做:

   $('#ddlLanguage').val('PHP');
            $('#ddlLanguage2').val('PHP');

但是,它只适用于第二个,即没有从webmethod加载的那个。

1 个答案:

答案 0 :(得分:1)

这里的问题是在使用新值初始化下拉列表之前调用val。请注意,ajax默认情况下会执行异步请求,这意味着ajax无法保证完成其工作。事实上它很可能不会!因此,当您在val下拉列表仍然为空之后立即致电ajax时,并且没有值可供选择。

要解决此问题,请在同步通话中使用相应的设置转为ajax

$.ajax({
    async: false,
    ...

或者在成功函数中调用val,当所有内容都加载时:

success: function(msg) {
    $("#ddlLanguage").empty().append($("<option></option>").val("[-]").html("Please select"));
    $.each(msg.d, function() {
        $("#ddlLanguage").append($("<option></option>").val(this['Value']).html(this['Text']));
    });

    $('#s2_combo').val('avalue');
},

第二个选项,如果是首选选项。