多级联动的下拉表，第二级下有时有第三级，有时没有，怎么组织页面呢？

MVC环境，第一级的<option>是直接静态方式写在view里面的，从第二级开始都是通过api使用ajax获取json更新的。
现在每一级的select上都绑好了js事件，如下：
<select id=一级下拉 onchange="一级分类(this.options[this.options.selectedIndex].value)">
获取的json对象结构如下：
{"分类号":"02.01","类别名称":"脂肪","末级":falus}
{"分类号":"02.02","类别名称":"水","末级":true}
第一级选择02的时候，第二级将"分类号"作为value，"类别名称"作为显示内容，绑定到了id=02的下拉框上。
怎样才能选中"末级":true的选择项后，什么都不做，选中"末级":falus的选择项后，去触发另一个事件绑定下一级。

9 个解决方案

#1

api检测选中项的末级标识是true or false ，如果是false则继续获取下级数据并返回；如果是true，则返回空，不在进行操作。

#2

引用 1 楼 wangzhiwei0721 的回复:

api检测选中项的末级标识是true or false ，如果是false则继续获取下级数据并返回；如果是true，则返回空，不在进行操作。

public object 读取分类(string 分类号)
{
    return 库.分类们.Where(w => w.分类号.StartsWith(分类号) && w.分类号.Length == 分类号.Length + 3).OrderBy(o => o.分类号).Select(s => new { s.分类号, s.类别名称, s.末级 });
}如果是选择了是末级，返回值一定是空的，因为每次都要求返回分类号比当前选中项长度+3的值，末级的分类号长度+3就找不到值。
这样做行是行的，判断返回值是否为空，有的话，显示并填充下一级，没的话什么也不做。
还有更极致的办法吗？我在拿到第二级选择项的时候，已经知道哪些有下级，哪些没有。选中没下级的项的话，我连ajax都不提交。

#3

你的方法是可行的，你在用ajax获取到数据后，填充绑定option的时候，可以在option上做一个自定义的属性EndNode="true",表示该选项是否存在下级。

#4

引用 3 楼 wangzhiwei0721 的回复:

你的方法是可行的，你在用ajax获取到数据后，填充绑定option的时候，可以在option上做一个自定义的属性EndNode="true",表示该选项是否存在下级。

你的头像很可爱，来段代码，嘿嘿。

#5

往select里面填充值不需要我给你写代码把，绑定出来之后是这样

<select onchange="Fun_SelectChange(this)">
<option value="02.01" endnode="false">脂肪</option>
<option value="02.02" endnode="true">水</option>
</select>

其实就是在option里面加一个自定义属性。
然后在JS里面检测

Function Fun_SelectChange(self){
       var endNode=$(self).find("option:selected").attr("endnode");
        if(endNode=="true"){
              var selectvalue=$(self).val();
             //ajax请求api
         }

}

大概就这样了....

#6

引用 5 楼 wangzhiwei0721 的回复:

大概就这样了....

恩，很好，懂你意思。我传值的时候不传this行吗？而是传选中值这样：

<select id=二级下拉 onchange="读取三级(this.options[this.options.selectedIndex])"></select>

function 读取三级(选中值) {
    if (选中值.attr("末级") == "否") {
        $("#三级区域").css('display', "");
        $.ajax({
            url: "../../接口/合规/读取分类", type: "get", data: { "分类号": 选中值.value }, contentType: "application/json; charset=utf-8", dataType: "json",
            success: function (返回值) {
                $("#三级下拉").empty().append("<option>请选择</option>");
                for (var 位置 in 返回值) {
                    $("#三级下拉").append("<option value=" + 返回值[位置].分类号 + " 末级=" + (返回值[位置].末级 ? "是" : "否") + ">【" + 返回值[位置].分类号 + "】" + 返回值[位置].类别名称 + "</option>");
                }
            },
        })
    }
}

if (选中值.attr("末级") == "否")这句话报错了。请问它要怎么配合绑定语句
<select id=二级下拉 onchange="读取三级(this.options[this.options.selectedIndex])"></select>

#7

你调试一下你的JS，监视一下[选中值.attr("末级")]，看一下返回值是什么

#8

引用 7 楼 wangzhiwei0721 的回复:

你调试一下你的JS，监视一下[选中值.attr("末级")]，看一下返回值是什么

我也准备换个头像，正在审批中。
console.log(选中值.attr("末级"))，直接右边一个红色X，报错。

#9

引用 8 楼 shawb 的回复:

Quote: 引用 7 楼 wangzhiwei0721 的回复:

你调试一下你的JS，监视一下[选中值.attr("末级")]，看一下返回值是什么

我也准备换个头像，正在审批中。
console.log(选中值.attr("末级"))，直接右边一个红色X，报错。

额，用浏览器调试脚本，打断点进行监视，看看。