js 下拉框

最新推荐文章于 2023-12-01 14:46:39 发布

翻译最新推荐文章于 2023-12-01 14:46:39 发布 · 608 阅读

要求：jquery的datagrid 一列中以下拉框形式显示，下拉框要求可多选

首先想到的是

1.select 及其 multiple 和 size属性

<select multiple="multiple" size="2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

ps:这样的效果是多行显示，要不然就没有下拉效果

2.用

ul 和li标签，可是这样子不好赋值

3.百度到 jquery有个js库，可以实现我想要的效果

http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body {
 margin-left: 5px;
 margin-top: 5px;
 margin-right: 5px;
 margin-bottom: 5px;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery MultiSelect Plugin Demo</title>
<link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="../src/jquery.multiselect.js"></script>

<script type="text/javascript">
$(function(){
$("select").multiselect({   
selectedList: 4 
});
});
function aa(){
alert($('#company').val());
}
</script>
</head>
<body>
<table align="center">
   <tr>
              <td height="49">
			  <select name="company"  multiple="multiple" id="company" onchange="change()">
			    <option value="0"></option>
                <option value="1">q1</option>
                <option value="2">q2</option>
				<option value="3">q3</option>
              </select><span id="company1" style="color:#FF0000"></span></td>
            </tr>
			<input type="button" value="anniu" onclick="aa()">
</table>
</body>
</html>