Web单选下拉列表与多选下拉列表的清除

kendo（项目实战）

本文章用于记录，分享

- 先上效果图

---

目的

• 根据单项按钮的选择展现不同下拉框，并有效去除原来下拉框文本值，属性，下拉属性值

前端

form表单：
<div class="row">
    <div class="form-group">
        <label for="isnotSafetyCommunity1" class="inline-label">社区安检：</label>
        <span class="inline-label">是</span>
        <input type="radio" name="isnotSafetyCommunity"id="isnotSafetyCommunity1" ${p.t.isnotSafetyCommunity=='10'?'checked="checked"':''} onclick="changeg();" value="10" checked  />
        <span class="inline-label">否</span>
        <input type="radio" name="isnotSafetyCommunity" id="isnotSafetyCommunity_get" ${p.t.isnotSafetyCommunity=='20'?'checked="checked"':''} onclick="isnot();" value="20" />
    </div>

    <div class="form-group" id="ad" hidden="hidden">
        <label for="category" class="inline-label"style="width: 238px">客户类型：</label>
        <input type="text"  name="category" id="category" value="${p.t.categoryName}"  style="width: 201px" />
        <input type="hidden"  name="categoryName" id="categoryName" value="${p.t.category}" />
    </div>
    <div class="form-group" id="ac" hidden="hidden">
        <div class="row">
            <label for="serverId" style="float:left;margin-left:20px;width: 100px;" class="inline-label">社区服务：</label>
            <input name="serverId" style="float:left;width: 580px;margin-left:10px;margin-top:-8px;" id="serverId"/>
        </div>
    </div>
</div>

JS
$(function(){
function changeg(){//是
    $("#ad").hide();//关闭客户类型
    $("#ac").show();//开启社区服务
    $("#category").val(" ");//值初始化
    $("#categoryName").val(" ");
    $("#isnotSafetyCommunity_get").removeAttr();
    $("#isnotSafetyCommunity_get").val("");
    $("#isnotSafetyCommunity1").val("10");
    $("#category").val("");
    $("#categoryName").val("");
    $("#category").data("kendoComboBox").text("");//根据kendoComboBox事件获取当前TEXT
}
function isnot(){//否
    $("#ad").show();
    $("#ac").hide();
    $("#isnotSafetyCommunity1").removeAttr();
    $("#isnotSafetyCommunity1").val("");
    $("#isnotSafetyCommunity_get").val("20");
    $("#serverId").val("");
    $("#serverId").data("kendoMultiSelect").value("");//清除多选下拉框中已选择的项
    $("#serverId_taglist li").remove();//清除下拉列表li下面的元素
}

    /***************社区服务***********************/
    $("#serverId").kendoMultiSelect({
        filter: "contains",
        dataTextField: "communityName",//goodsTypeName
        dataValueField: "id",
        highlightFirst: false,
        dataSource: rolePermissionDataSource,
        change: function (e) {
            var value = this.value();
            $("#serverId").val(value);
        }
    });
    var rolePermissionObj = $("#serverId").data("kendoMultiSelect");
    var roleIdsData ="${p.roleIds}"
    var roleIdsSplit = roleIdsData.toString().split(",");
    if(roleIdsData!=null){
        rolePermissionObj.value(roleIdsSplit);
        $("#serverId").val(roleIdsData);
    }

        $("#category").kendoComboBox({
            filter: "contains",
            dataTextField: "typeName",
            dataValueField: "typeCode",
            highlightFirst: false,
            suggest: true,
            dataSource: customerTypeDataSource,
            change: function(e) {
                $("#categoryName").val(this.text());
                $("#serverId").val("");
            }
    });
});    

总结：
重点如何去抓住多选列表中的属性值，领悟结合浏览器前端页面来调试，