> 웹 프론트엔드 > JS 튜토리얼 > jquery ajax는 드롭다운 상자의 3단계 새로 고침 없음 링크를 구현하고 선택한 값을 저장하고 유지합니다_jquery

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

WBOY
풀어 주다: 2016-05-16 17:18:27
원래의
1049명이 탐색했습니다.

기능: 도, 시, 지역의 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($("
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿