js 下拉框

来源：互联网发布：mysql 子查询效率编辑：程序博客网时间：2024/06/05 00:27

要求：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>