使用 javascript 在下拉列表中保存值

Posted 2023-05-07

【中文标题】使用 javascript 在下拉列表中保存值

【英文标题】：Save value in dropdown using javascript

【发布时间】：2018-12-28 00:20:49

【问题描述】：

我想在表单编辑时在 Country > State > City > Zone @ 的嵌套下拉列表中设置默认值。 所有数据都填写在所有下拉列表中，但未设置值。

我在 asp.net 表单中使用了 select2 下拉菜单并使用 jquery ajax 填充数据。

================================================ =========================

function Edit()

 $(response.d).find("tblInvoice").each(function () 
    selCountryId = $(this).find("intCountryId").text();
    $("#select2-selCountry-container").text($(this).find("strCountryName").text());
    $('#selCountry').trigger('change');

    selStateId = $(this).find("intStateId").text();
    $('#selState').trigger('change');
    $("#select2-selState-container").text($(this).find("strStateName").text());

    selCityId = $(this).find("intCityId").text();
    $('#selCity').trigger('change');
    $("#select2-selCity-container").text($(this).find("strCityName").text());

================================================ =========================

function getCountry() 
    $.ajax(
        type: "POST",
        url: "Country.aspx/GetCountry",
        data: JSON.stringify(),
        contentType: "application/json; charset=utf-8",
        dataType: "JSON",
        success: function (response) 

            var name = "#selCountry";
            var ddl = $(name);
            var Col_Key = "intCountryID";
            var Col_val = "strCountryName";

            ddl.find('option').remove();
            $(response.d).find("tblCountry").each(function () 
                var OptionValue = $(this).find(Col_Key).text();
                var OptionText = $(this).find(Col_val).text();
                var option = $("<option>" + OptionText + "</option>");
                option.attr("value", OptionValue);
                ddl.append(option);
            );
            $(ddl).val('0');
        ,
        failure: function (response) 
        

    );
);

================================================ =========================

function getState() 
    $.ajax(
        type: "POST",
        url: "State.aspx/GetState",
        data: JSON.stringify(
            COUNTRYID: countryid,
            ACTION: Action
        ),
        contentType: "application/json; charset=utf-8",
        dataType: "JSON",
        success: function (response) 
            var name = "#selState";
            var ddl = $(name);
            var Col_Key = "intStateID";
            var Col_val = "strStateName";

            ddl.find('option').remove();
            $(response.d).find("tblState").each(function () 
                var OptionValue = $(this).find(Col_Key).text();
                var OptionText = $(this).find(Col_val).text();
                var option = $("<option>" + OptionText + "</option>");
                option.attr("value", OptionValue);
                ddl.append(option);
            );
            $(ddl).val('0');
        ,
        failure: function (response) 
        
    );

================================================ =========================

function getCity() 
    $.ajax(
        type: "POST",
        url: "City.aspx/GetCity",
        data: JSON.stringify(
            STATEID: countryid,
            ACTION: Action
        ),
        contentType: "application/json; charset=utf-8",
        dataType: "JSON",
        success: function (response) 
            var name = "#selCity";
            var ddl = $(name);
            var Col_Key = "intCityID";
            var Col_val = "strCityName";

            ddl.find('option').remove();
            $(response.d).find("tblCity").each(function () 
                var OptionValue = $(this).find(Col_Key).text();
                var OptionText = $(this).find(Col_val).text();
                var option = $("<option>" + OptionText + "</option>");
                option.attr("value", OptionValue);
                ddl.append(option);
            );
            $(ddl).val('0');
        ,
        failure: function (response) 
        
    );

================================================ =========================

【问题讨论】：

这find 工作吗：selCountryId = $(this).find("intCountryId").text();.?我对find 很陌生，但它应该采用元素或 jQuery 对象。帖子的标题是“保存”。它应该说“设置”吗？ $(this) 是什么？

Hi Wazz 使用这个我们可以命令 js 获取当前元素 ID，而不是每次使用对象名称时都可以使用 this

【参考方案1】：

function Edit()

var intddlCountry = '0', strddlCountry = '0', intddlState = '0', strddlState = '0', intddlCity = '0', strddlCity = '0';

$(response.d).find("tblInvoice").each(function () 

intddlCountry = $(this).find("intCountryId").text();
strddlCountry = $(this).find("strCountryName").text();
intddlState = $(this).find("intStateID").text();
strddlState = $(this).find("intState").text();
intddlCity = $(this).find("intCityID").text();
strddlCity = $(this).find("strCityName").text();

$.ajax(
    url: getCountry(),
    async: true,
    success: function (response) 
        $("#selCountry").val(intddlCountry);
        $("#select2-selCountry-container").text(strddlCountry);

        $.ajax(
            url: GetState(),
            async: true,
            success: function (response) 
                $("#selState").val(intddlState);
                $("#select2-selState-container").text(strddlState);

                $.ajax(
                    url: getCity(),
                    success: function (response) 
                        $("#selCity").val(intddlCity);
                        $("#select2-selCity-container").text(strddlCity);
                    
                );
            
        );
    
);  
);