jquery ajax는 드롭다운 상자의 3단계 새로 고침 없음 링크를 구현하고 선택한 값을 저장하고 유지합니다_jquery

기능: 도, 시, 지역의 3단계 연결, jquery ajax를 사용하여 데이터 바인딩 획득, 선택한 값을 저장하고 페이지 새로 고침 또는 제출 후에도 선택한 상태를 유지할 수 있음

다음 코드를 별도의 js 파일에 넣고 페이지에서 참조하여

코드 복사 코드는 다음과 같습니다:

//获取cookie值
function readCookie(name) {
    var cookieValue = "";
    var search = name + "=";
    if (document.cookie.length > 0) {
        offset = document.cookie.indexOf(search);
        if (offset != -1) {
            offset += search.length;
            end = document.cookie.indexOf(";", offset);
            if (end == -1) end = document.cookie.length;
            cookieValue = unescape(document.cookie.substring(offset, end))
        }
    }

    return cookieValue;
}

//保存cookie值
function writeCookie(name, value, hours, escp) {
    var expire = "";
    if (hours != null) {
        expire = new Date((new Date()).getTime() + hours * 3600000);
        expire = "; expires=" + expire.toGMTString();
    }
    if (escp == "True") {
        document.cookie = name + "=" + value + expire;
    } else {
        document.cookie = name + "=" + escape(value) + expire;
    }
}

//省市区，流域，水系，断面条件选择
$(function() {

    var $ddlprovince = $("#ddlProvince");     //省份
    var $ddlcity = $("#ddlCity");      //城市
    var $ddlarea = $("#ddlAreaName");         //区域

    //根据省份查询城市
    //$ddlprovince.focus(); //不要加focus,否则设置selected有问题
    $ddlprovince.bind("change keyup", function() {
        if ($(this).val() != "-1") {
            loadWater($(this).val(), "SelectCity");
        } else {
            $("select[id$=ddlCity] > option").remove();
            $ddlcity.append($("").val("-1").html("--请选择--"));
        }
        //从新选择省份或者从新选择城市都会初始化区域
        $("select[id$=ddlAreaName] > option").remove();
        $ddlarea.append($("").val("-1").html("--请选择--"));
    });

    //如果城市没有填充数据，省份有选择数据则加载数据
    if ($("select[id$=ddlCity] > option").length == 1 && $ddlprovince.val() != "-1") {

        loadWater($ddlprovince.val(), "SelectCity");
        //读cookie,有值则设为选中状态
        var cityname = readCookie("JQ_CityName");
        if (cityname != null && cityname != "undefined" && cityname != "") {

            //$("select[id=ddlWaterXiName] > option:contains('" + watername + "')").attr("selected", "true");
            $("select[id$=ddlCity] > option[value='" + cityname + "']").attr("selected", "true");
        }
    }

//도시 기준 영역 쿼리
//$ddlcity.focus();
$ddlcity.bind("change keyup", function() {
if ($(this).val ( ) != "-1") {
                                                                                                               .val(), 0.5, true);
       } else {
               $("select[name$=ddlAreaName] > 옵션").remove( ); <옵션>").val("-1").html("--선택하세요--"));
                           

//구 이름에 데이터가 채워져 있지 않고 도시에서 데이터를 선택한 경우 데이터를 로드
if ($("select[id$=ddlAreaName] > option").length = = 1 && $ddlcity .val ()! = "-1") {
Loadwater ($ ddlcity.val (), "selectareaname");

if (areaname != null && 지역 이름 != "정의되지 않음" && 지역 이름 != "") {

$("select[id=ddlAreaName] > option[ value='" 지역 이름 "']").attr("selected" , "사실");

}
}

$ddlarea.bind("change keyup", function() {
if ($(this).val() != "-1") {
//쿠키를 저장할 값을 선택하세요

writeCookie("JQ_AreaName", $(this).val(), 0.5, true);

}

});

});

function loadWater(selectedItem, typename) {
$.ajax({
type: "GET",

url: "/GetWaterxiname.ashx",

data: { usetype: typename, id: selectedItem },
contentType: "application/json; charset=utf-8",

dataType: "json",

async: false,
성공: 함수 성공(데이터) {
bindWater(데이터, 유형 이름);
}
});
}

함수 binWater(데이터, 유형 이름) {

if (typename == "SelectCity") { //도시 바인딩

                                                                                                           >                           "<옵션>").val("-1").html("--선택하세요--"));

for (var i = 0; i < data.length; i ) {

$("select[id$=ddlCity]").append($("< /option>").val(data[i].City).html(data[i].City));

                                                                                                          🎜>

$ ("select [name $ = ddlareaname] & gt; option"). Remove(); // 원래 옵션 삭제

$ ("select [ID $ = ddlareaname]"). ;").val("-1").html("--선택하세요--"));

for (var i = 0; i < data.length; i ) {
$("select[id$=ddlAreaName]").append($("< /option>").val(data[i].AreaName).html(data[i].AreaName));
                                                                                                                     페이지가 로드되면 주 데이터가 바인딩됩니다. selectvalue로 얻어야 ​​합니다. 선택한 도시 및 구역 데이터는 Request["idname"]
로 얻어야 ​​합니다.