在一个页面多个 multiple select 框

最新推荐文章于 2025-02-19 11:44:58 发布

原创最新推荐文章于 2025-02-19 11:44:58 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #控件 #chosen

项目开发专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个名为Chosen的插件，该插件可以实现在一个页面上使用多个多选下拉框的功能，并提供了详细的使用方法，包括引入必要的JS和CSS文件、设置select元素的样式和初始化等步骤。

在一个页面多个 multiple select 框

jquery提供了几种多选下拉框，但因为内部实现的问题很多不能在一个页面使用多个，

使用的话，取值会有问题（只能取到一个控件的值），当然可以修改源码来实现这个功能

对于不懂 js的我就不费那个劲了（实际上改过，麻烦，效果还不好，个人能力问题了）。

后来找到了这个chosen，体验了一下，才不错。这个是最方便，最简单的。

官方地址: http://davidwalsh.name/jquery-chosen

一：基本功能：

1：多选

2：过滤

二：使用方法：

1：引用js类库： jquery.min.js，chose.jquery.js

2：引用css: chosen.css

3：设置select 样式 : class= "chzn-select"

4：设置多选：添加属性 multiple

5：动态加载，各种方法了：这里追加option

6：初始化： $( ".chzn-select" ).chosen();

7：改变后刷新： $( "#s1" ).trigger( "liszt:updated" );

8：取值 : $( "#s1" ).val();

< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >

<html>

<head>

<title>chosen : multiple select demo </title>

<script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type= "text/javascript" ></script>

<script src= "chosen/chosen.jquery.js" type= "text/javascript" ></script>

<link rel= "stylesheet" href= "chosen/chosen.css" >

</head>

<body>

<select id= "s1" data-placeholder= "Choose a Country" class= "chzn-select" multiple style= " width:350 px ; " tabindex= "4" >

<option value= "" ></option>

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

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

<option value= "3" >3</option>

<option value= "4" >4</option>

</select>

<select id= "s2" data-placeholder= "Choose a Country" class= "chzn-select" multiple style= " width:350 px ; " tabindex= "4" >

<option value= "" ></option>

<option value= "a" >a</option>

<option value= "b" >b</option>

<option value= "c" >c</option>

<option value= "d" >d</option>

</select>

<div id= "tip" style= " border:solid 1 px red;height:20;width:700 px ;margin-top:150 px ;margin-bottom:50 px ; " > tips...</div>

<button onclick= " tip() " >tips..</button>

<script>

//改变 - 动态添加

$( "#s1" ).append( "<option value='11'>11</option>" );

//默认选中

$( "#s1" ).append( "<option value='12' selected>12</option>" );

//初始化

$( "#s1" ).chosen();

$("#s2" ).chosen();

//改变后更新

// $( "#s1" ).trigger( "liszt:updated" );

function tip() {

var a = $( "#s1" ).val();

var b = $( "#s2" ).val();

$( "#tip" ).html(a + " " + b);

}

</script>

</body>

</html>

效果预览