如何使用jquery动态创建一个select控件

jquery文档 *** 作的append()或 appendTo()方法可以在被选元素的结尾插入内容，因此可用于动态创建select控件

$("div").append("<select></select>")          // 在已经存在的div标签下创建select元素

$("<option></option>").appendTo($("select"))  // 为select元素添加option选项

实例演示：动态创建一个含有两个选项——“黑”“白”的select控件，并默认选中“白”这个选项

示例代码如下

创建Html元素

<div class="box">

<span>点击按钮后创建select标签，并默认选中“白”这个选项：</span><br>

<div class="content"></div>

<input type="button" value="创建select标签">

</div>

设置css样式

div.box{width:300pxpadding:20pxmargin:20pxborder:4px dashed #ccc}

div.box span{color:#999font-style:italic}

div.content{width:250pxmargin:10px 0padding:20pxborder:2px solid #ff6666}

select{width:150pxheight:30pxborder:1px solid #6699FF}

编写jquery代码

$(function(){

$("input:button").click(function() {

// 创建select

$("div.content").append("<select></select>")

// 添加选项

$("<option></option>").val('0').text("黑").appendTo($("select"))

$("<option></option>").val('1').text("白").appendTo($("select"))

// 设置默认选项

$("select").val('1')

})

})

观察效果

初始状态

点击按钮创建select控件之后

//HTML中代码

<div id="menu" class="easyui-menu" style="width:150px"><div id="m-update">更新</div><div class="menu-sep"></div><%--分页下划线--%><div id="m-closeall">全部关闭</div><div id="m-closeother">除此之外全部关闭</div><div class="menu-sep"></div><div id="m-close">关闭</div>

//查询按钮

$("#getprefrominfo").click(function () {var cols = $.data(document.body, "selectcols")//数据缓存，获取需要查询的列名if (cols == null) {AlertMsg("请选择列!") return }else {$("#grid").datagrid("loading") var index = 0//0为查询var qp = {cols: cols,sortway: $.data(document.body, "sortway"),index: index} $("#result").empty() $("#grid").datagrid({queryParams: qp, //datagrid自带的传值参数

//这边可以不用queryParams传值，可以写成：

// url: '/report/PreformDrawInfo_Get?_=' + radomnum(1000)+data,

//其中data为字符串类型的数据

//但是在IE下不用queryParams的话，数据中出现中文字符或出现乱码url: '/report/PreformDrawInfo_Get?_=' + radomnum(1000),

onRowContextMenu: function (e, rowIndex, rowData) { //右击事件$.data(document.body, "selectupdaterodno", rowData['入库棒号'])//将右击选中的某行数据放在缓存中$('#menu').menu('show', {left: e.pageX, //d出窗口的方位坐标top: e.pageY}) e.preventDefault()//阻止浏览器自带的右键菜单d出}}) }})

//右击后触发的事件

$('#m-update').click(function () {postAjax("Report", "updateState", "rodno=" + $.data(document.body, "selectupdaterodno"), function (json) {if (!json.iserror) {$.data(document.body, "selectupdaterodno", "")//清空缓存AlertMsg("更新成功!") }}) })

使用jQuery配合Superfish制作下拉菜单需要具备以下几个参数

1、项目中需要有jQuery版本库；

2、下载Superfish插件——Superfish；

3.需要把上面两个js引入你的项目中

导入jQuery库和Superfish插件

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

为了让菜单一个默认的样式，大家还可以到superfish下载superfish.css样式文件，可以直接调用

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

---