Question

求帮忙把下面的json写成一个select三级联动，包含JS、html代码。

////////////////////////////----ajax----//////////////////////////function getype(id,stype){ if(id>0){ $('#getype').html('<img src="'+parent.web_path+'packs/images/load.gif">'); $.ajax({ type: 'get', cache: false, dataType: 'json', url: "<?=site_url('vod/admin/vod/type_i')?>?"+stype, timeout: 3000, success:function(r){ $("#getype").html(''); if(r.length>0){ $.each(r, function(i,row){ chk = row.chk=='true' ? 'checked' : ''; $("#getype").append('<option value="'+row.name+'">'+row.name+'</option>'); }); } } }); } }////////////////////////////----json----//////////////////////////[{"name":"jack","brand":"jack","bname":"\u5c0f\u660e"},{"name":"Black","brand":"Black","bname":"\u5c0f\u9ed1"},{"name":"Shawshank","brand":"Shawshank","bname":"\u5f20\u4f1f"},{"name":"Xiao Gang","brand":"Xiao Gang","bname":"\u5c0f\u521a"},{"name":"Cockroach","brand":"Cockroach","bname":"\u5c0f\u667a"},{"name":"Depp","brand":"Depp","bname":"\u5c0f\u718a"},{"name":"Mary","brand":"Mary","bname":"\u5c0f\u4e3d"},{"name":"Minghao","brand":"Minghao","bname":"\u5c0f\u80d6"},{"name":"Lu Yi","brand":"Lu Yi","bname":"\u963f\u534e"},{"name":"Andy","brand":"Andy","bname":"\u534e\u4ed4"}]调用部分<script type="text/javascript">getype(<?=$cid?>,'<?=urlencode($getype)?>')</script>





Answer 1

html 代码:
<div>
    <select id="select1">
        <option value="">--请选择--</option>
    </select>
    <select id="select2">
        <option value="">--请选择--</option>
    </select>
    <select  id="select3">
        <option value="">--请选择--</option>
    </select>
</div>

Jquery js代码:

$(function () {
    var json = '[{"name":"jack","brand":"jack","bname":"\u5c0f\u660e"},{"name":"Black","brand":"Black","bname":"\u5c0f\u9ed1"},' +
            '{"name":"Shawshank","brand":"Shawshank","bname":"\u5f20\u4f1f"},{"name":"Xiao Gang","brand":"Xiao Gang",' +
            '"bname":"\u5c0f\u521a"},{"name":"Cockroach","brand":"Cockroach","bname":"\u5c0f\u667a"},' +
            '{"name":"Depp","brand":"Depp","bname":"\u5c0f\u718a"},{"name":"Mary","brand":"Mary","bname":"\u5c0f\u4e3d"},' +
            '{"name":"Minghao","brand":"Minghao","bname":"\u5c0f\u80d6"},{"name":"Lu Yi","brand":"Lu Yi","bname":"\u963f\u534e"},' +
            '{"name":"Andy","brand":"Andy","bname":"\u534e\u4ed4"}]';
    var object = $.parseJSON(json);
    var $select1 = $("#select1");
    var $select2 = $("#select2");
    var $select3 = $("#select3");
    $.each(object,function(i,item){
        var option1 = '<option data-id="'+i +'" value="'+ item.bname+'">' +item.bname +'</option>';
        $select1.append(option1);
        var option2 = '<option data-id="'+i +'" value="'+ item.name+'">' +item.name +'</option>';
        $select2.append(option2);
        var option3 = '<option data-id="'+i +'" value="'+ item.brand+'">' +item.brand +'</option>';
        $select3.append(option3);
    })

    $select1.on('change',function(){
        var select_id = $(this).find("option:selected").attr("data-id");
        $select2.find("[data-id="+ select_id +"]").attr("selected","true");
        $select2.find("[data-id="+ select_id +"]").siblings().removeAttr("selected");
        $select3.find("[data-id="+ select_id +"]").attr("selected","true");
        $select3.find("[data-id="+ select_id +"]").siblings().removeAttr("selected");
    })
    $select2.on('change',function(){
        var select_id = $(this).find("option:selected").attr("data-id");
        $select1.find("[data-id="+ select_id +"]").attr("selected","true");
        $select1.find("[data-id="+ select_id +"]").siblings().removeAttr("selected");
        $select3.find("[data-id="+ select_id +"]").attr("selected","true");
        $select3.find("[data-id="+ select_id +"]").siblings().removeAttr("selected");
    })
    $select3.on('change',function(){
        var select_id = $(this).find("option:selected").attr("data-id");
        $select1.find("[data-id="+ select_id +"]").attr("selected","true");
        $select1.find("[data-id="+ select_id +"]").siblings().removeAttr("selected");
        $select2.find("[data-id="+ select_id +"]").attr("selected","true");
        $select2.find("[data-id="+ select_id +"]").siblings().removeAttr("selected");
    })
})

我是直接取到你的json，然后解析  循环组成下拉框的，

选择任意一个下拉框，其他下拉框的值都会对应改变，不知道你想要的联动的效果是不是这样

的，有疑问可以再问我

追问

json地址是url: "?"+stype,

这样我要怎么获取到里面的数据源？

追答

使用ajax获取

追问

我尝试了几次发现，我好像不会ajax代码。
我上面的ajax是从别的地方复制过来的。

追答

$.ajax({
type: 'get',  //ajax的方式  get/post
cache: false,   //是否缓存
dataType: 'json',  //接收返回数据的方式
url: "<?=site_url('vod/admin/vod/type_i')?>?"+stype,  //路径
timeout: 3000, //超时时间
success:function(data){  //成功后返回的回调方法  
        var json    // data就是后台返回的json串
}
})

这样写就可以 

追问

调试了几次后发现好像不行呢？

我会好评追加。

追答

$.ajax({
type: 'get',  //ajax的方式  get/post
cache: false,   //是否缓存
dataType: 'json',  //接收返回数据的方式
url: "<?=site_url('vod/admin/vod/type_i')?>?"+stype,  //路径
timeout: 3000, //超时时间
success:function(data){  //成功后返回的回调方法  
        var json =data;
    var object = $.parseJSON(json);
    var $select1 = $("#select1");
    var $select2 = $("#select2");
    var $select3 = $("#select3");...省略
}
})

这样  写在成功回调函数的里面才可以

追问

为啥会这样呢？ 好像是你上面的数据源有加号，这个是怎么一个分段？

追答

url 吗？写成你的地址就可以 这个url是从你的问题复制来的

追问

我在百度HI 发给你了。

追答

输出一下 data看一下，可能是缺少引号之类的