Jqueryselect三級(jí)聯(lián)動(dòng)(需要JSON數(shù)據(jù))-創(chuàng)新互聯(lián)

Scripts/Category.js

成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的永康網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
//Jquery三級(jí)類別聯(lián)動(dòng)$(function () {  
    BindCategory();
})
function BindCategory() {
var $txtCategory = $("#txtCategoryId");
var _selectId = ["selBigClass", "selSmallClass", "selThreeClass"];
for (var i = 0; i < _selectId.length; i++) {
var select = document.createElement("select");
        select.id= _selectId[i];
        select.name= _selectId[i];
        $txtCategory.parent().append(select);
    }
var $selBigClass = $("#selBigClass");
var $selSmallClass = $("#selSmallClass");
var $selThreeClass = $("#selThreeClass");
    $selSmallClass.hide();
    $selThreeClass.hide();
    $.getJSON("Scripts/CategoryJson.js", function (json) {
var html = ['<option value="">請選擇大類</option>'];
for (var key in json) {
if (json[key].pid == 0) {
                html.push('<option value="' + json[key].id + '">' + json[key].name + '</option>');
            }
        }
//第一級(jí)類別        $selBigClass.empty().append(html.join('')).change(function () {
            $txtCategory.val(this.value);
            $selThreeClass.hide();
            $selSmallClass.show();
var html = ['<option value="">請選擇小類</option>'];
for (var data in json) {
if (json[data].pid == $("#selBigClass").val()) {
                    html.push('<option value="' + json[data].id + '">' + json[data].name + '</option>');
                }
            }
//第二級(jí)類別            $selSmallClass.empty().append(html.join('')).change(function () {
                $txtCategory.val(this.value);               
                $selThreeClass.show();
var html = ['<option value="">請選擇小類</option>'];
for (var data in json) {
if (json[data].pid == $selSmallClass.val()) {
                        html.push('<option value="' + json[data].id + '">' + json[data].name + '</option>');
                    }
                }
//第三級(jí)類別                $selThreeClass.empty().append(html.join('')).change(function () {
                    $txtCategory.val(this.value);
                });
//如果不存在第三級(jí)類別則隱藏第三級(jí)類別控件  if ($selThreeClass.get(0).options.length <= 1) {
                    $selThreeClass.hide();
return false;
                }
            });
//如果不存在第二級(jí)類別則隱藏第二級(jí)類別控件 if ($selSmallClass.get(0).options.length <= 1) {
                $selSmallClass.hide();
return false;
            }
           
        });
    });
};

Scripts/CategoryJson.js（如何生成json數(shù)據(jù)詳見：http://www.cnblogs.com/haozhenjie819/p/3601676.html）

[{ "id": 31, "name": "u65b0u95fbu4e2du5fc3", "pid": 0, "itemvalue": "|0|" },
{"id": 59, "name": "u52a0u76dfu5408u4f5c", "pid": 0, "itemvalue": "|0|" },
{"id": 65, "name": "u4ea7u54c1u670du52a1", "pid": 0, "itemvalue": "|0|" },



{"id": 60, "name": "u52a0u76dfu987bu77e5", "pid": 59, "itemvalue": "|0|59|" },
{"id": 61, "name": "u52a0u76dfu6d41u7a0b", "pid": 59, "itemvalue": "|0|59|" },
{"id": 62, "name": "u52a0u76dfu533au57df", "pid": 59, "itemvalue": "|0|59|" },



{"id": 70, "name": "u63a8u8350u670du52a1", "pid": 65, "itemvalue": "|0|65|" },
{"id": 71, "name": "u8ba1u8d39u65b9u5f0f", "pid": 65, "itemvalue": "|0|65|" },
{"id": 72, "name": "u7528u6237u987bu77e5", "pid": 65, "itemvalue": "|0|65|" },
{"id": 73, "name": "u7981u5bc4u8303u56f4", "pid": 65, "itemvalue": "|0|65|" },
{"id": 75, "name": "u666eu901au5febu9012", "pid": 70, "itemvalue": "|0|65|70|" },
{"id": 76, "name": "u7279u79cdu5febu4ef6", "pid": 70, "itemvalue": "|0|65|70|" },
{"id": 77, "name": "u9650u65f6u6d3eu9001", "pid": 70, "itemvalue": "|0|65|70|" },
{"id": 78, "name": "u4ee3u6536u8d37u6b3e", "pid": 70, "itemvalue": "|0|65|70|" },
{"id": 79, "name": "u4fddu4ef7u670du52a1", "pid": 70, "itemvalue": "|0|65|70|" }, 
{"id": 80, "name": "u4ee3u7b7eu56deu5355", "pid": 70, "itemvalue": "|0|65|70|"}]
View Code

html頁面

<htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server">  <title>三級(jí)聯(lián)動(dòng)</title>  <scriptsrc="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  <scriptsrc="Scripts/Category.js" type="text/javascript"></script></head><body>  <formid="form1" runat="server">   
 <table> <tr>  <td>新聞?lì)悇e：</td>  <td> <inputid="txtCategoryId" name="txtCategoryId" type="hidden" runat="server" /></td> </tr>               
   </table>  </form>    
</body></html>

效果圖

知識(shí)點(diǎn)：1、Jquery獲取select中option個(gè)數(shù)

$("#selSmallClass").get(0).options.length

分享名稱：Jqueryselect三級(jí)聯(lián)動(dòng)(需要JSON數(shù)據(jù))-創(chuàng)新互聯(lián)
URL鏈接：http://bm7419.com/article26/ddpsjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、手機(jī)網(wǎng)站建設(shè)、App設(shè)計(jì)、建站公司、做網(wǎng)站、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

手機(jī)網(wǎng)站建設(shè)