jquery点击显示菜单点击对象可以有多个

<select>

<optgroup label="aaa">

<option>分清是非</option>

<option>分清是非</option>

<option>分清是非</option>

</optgroup>

<optgroup style="color:#C30" label="bbb">

<option>分清是非</option>

<option>分清是非</option>

<option>分清<br/>是非</option>

</optgroup>

</select>

html multi select控件提交form：

一、multiselect 是一个开源插件，官网地址>

“bootstrap-selectjs ”联动改变方式如下：

1、多选效果

可以设置最多只能选几个

2、图文结合的效果

3、远程搜索功能（即在用户输入搜索内容时动态去后台取数据）

输入内容前

输入空格搜索出全部

滚动条滑动到底部自动加载剩余项

输入文本动态去后台过滤

更高级的用法如：

代码示例如下：

1、多选效果

select2的多选很简单，设置一个属性就好了。

<script src="~/Scripts/jquery-1102js"></script>

<script src="~/Content/bootstrap/js/bootstrapjs"></script>

<link href="~/Content/bootstrap/css/bootstrapcss" rel="stylesheet" /> 

<script src="~/Content/select2-master/dist/js/select2js"></script>

<link href="~/Content/select2-master/dist/css/select2css" rel="stylesheet" />　<select id="sel_menu2" multiple="multiple" class="form-control">

         <optgroup label="系统设置">

              <option value="1">用户管理</option>

              <option value="2">角色管理</option>

              <option value="3">部门管理</option>

              <option value="4">菜单管理</option>

         </optgroup>

         <optgroup label="订单管理">

              <option value="5">订单查询</option>

              <option value="6">订单导入</option>

              <option value="7">订单删除</option>

              <option value="8">订单撤销</option>

         </optgroup>

         <optgroup label="基础数据">

              <option value="9">基础数据维护</option>

          </optgroup>

     </select> //多选

 $("#sel_menu2")select2({        

 tags: true,        

 maximumSelectionLength: 3  //最多能够选择的个数    });

2、图文结合的效果

<select id="sel_menu" class="js-example-templating js-states form-control">

             <optgroup label="系统设置">

                 <option value="1">用户管理</option>

                 <option value="2">角色管理</option>

                 <option value="3">部门管理</option>

                 <option value="4">菜单管理</option>

             </optgroup>

             <optgroup label="订单管理">

                 <option value="5">订单查询</option>

                 <option value="6">订单导入</option>

                 <option value="7">订单删除</option>

                 <option value="8">订单撤销</option>

             </optgroup>

             <optgroup label="基础数据">

                 <option value="9">基础数据维护</option>

             </optgroup>

         </select>$(function () {    

 //带    

 $("#sel_menu")select2({        

 templateResult: formatState,        

 templateSelection: formatState    

 });

 });

 function formatState(state) {    

 if (!stateid) { return statetext; }    

 var $state = $(      

 '<span><img src="/content/images/' + stateelementvaluetoLowerCase() + 'ico" class="img-flag" /> ' + statetext + '</span>'    

 );    

 return $state;};

3、远程搜索功能（即在用户输入搜索内容时动态去后台取数据）

<select id="sel_menu3" class="js-data-example-ajax form-control">

      <option value="3620194" selected="selected">请选择</option>

 </select>$(function () {    //远程筛选

    $("#sel_menu3")select2({

        ajax: {

            url: "/Home/GetProvinces",

            dataType: 'json',

            delay: 250,

            data: function (params) {                

            return {

                    q: paramsterm, // search term                    page: paramspage

                };

            },

            processResults: function (data, params) {

                paramspage = paramspage || 1;                

                return {

                    results: dataitems,

                    pagination: {

                        more: (paramspage  10) < datatotal_count

                    }

                };

            },

            cache: true

        },

        escapeMarkup: function (markup) { return markup; }, // let our custom formatter work

        minimumInputLength: 1,

        templateResult: formatRepoProvince, // omitted for brevity, see the source of this page

        templateSelection: formatRepoProvince // omitted for brevity, see the source of this page    });

});function formatRepoProvince(repo) {    

if (repoloading) return repotext;    

var markup = "<div>"+reponame+"</div>";    

return markup;

}

这里有要注意的一个地方就是processResults属性对应的方法有一个more属性用于是否分页显示的，这里的值要和你需要一次显示的值的条数匹配。

后台对应的方法如下：

public List<string> lstProvince = new List<string>() {"北京市","天津市","重庆市","上海市","河北省","山西省","辽宁省","吉林省","黑龙江省","江苏省","浙江省","安徽省","福建省","江西省","山东省","河南省","湖北省","湖南省","广东省","海南省","四川省","贵州省","云南省","陕西省","甘肃省","青海省","台湾省","内蒙古自治区","广西壮族自治区","西藏自治区","宁夏回族自治区","新疆维吾尔自治区","香港特别行政区","澳门特别行政区" };        

public JsonResult GetProvinces(string q, string page)

        {            

        var lstRes = new List<Province>();            

        for (var i = 0; i < 30; i++)            

        {                

        var oProvince = new Province();                

        oProvinceid = i;                

        oProvincename = lstProvince[i];                

        lstResAdd(oProvince);            

        }            

        if (!stringIsNullOrEmpty(qTrim()))            

        {                

        lstRes = lstResWhere(x => xnameContains(q))ToList();            }            

        var lstCurPageRes = stringIsNullOrEmpty(page)  lstResTake(10) : lstResSkip(ConvertToInt32(page)  10 - 10)Take(10);            

        return Json(new { items = lstCurPageRes, total_count = lstResCount }, JsonRequestBehaviorAllowGet);        }

当然是可以更改的，但前提是必须放在select外标签上，option 是内部属性，是不能直接修改的，把<option style="color:red">volo</option>换成下面的代码即可：

<select id="optionid" style="color:blue;">

<option value="1">volo</option>

<option value="2">baidu</option>

</select>

<script type="text/javascript">

documentgetElementsById("optionid")stylecolor="red"

</script>

jQuery是控制和 *** 作select详解。

先看下面的html代码

<select id="test">

<option value="1">选项一<option>

<option value="2">选项一<option>

<option value="n">选项N<option>

</select>

所谓jQuery *** 作“select”, 说的更确切一些是应该是jQuery控制 “option”， 看下面的jQuery代码：

//获取第一个option的值

$('#test option:first')val();

//最后一个option的值

$('#test option:last')val();

//获取第二个option的值

$('#test option:eq(1)')val();

//获取选中的值

$('#test')val();

$('#test option:selected')val();

//设置值为2的option为选中状态

$('#test')attr('value','2');

//设置最后一个option为选中

$('#test option:last')attr('selected','selected');

$("#test")attr('value' , $('#test option:last')val());

$("#test")attr('value' , $('#test option')eq($('#test option')length - 1)val());

//获取select的长度

$('#test option')length;

//添加一个option

$("#test")append("<option value='n+1'>第N+1项</option>");

$("<option value='n+1'>第N+1项</option>")appendTo("#test");

//添除选中项

$('#test option:selected')remove();

//删除项选中(这里删除第一项)

$('#test option:first')remove();、

//指定值被删除

$('#test option')each(function(){

if( $(this)val() == '5'){

$(this)remove();

}

});

$('#test option[value=5]')remove();

//获取第一个Group的标签

$('#test optgroup:eq(0)')attr('label');

//获取第二group下面第一个option的值

$('#test optgroup:eq(1) : option:eq(0)')val();

以上就是关于jquery点击显示菜单点击对象可以有多个全部的内容，包括:jquery点击显示菜单点击对象可以有多个、html multi select控件怎么提交form、bootstrap-select.js 怎么联动改变，例如：省份，城市二级联动。等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！