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("");            }    });});    

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