js 左边项 --> 右边转

最新推荐文章于 2023-03-07 16:30:09 发布

原创最新推荐文章于 2023-03-07 16:30:09 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #数据库 #ViewUI

Jquery 专栏收录该内容

2 篇文章

订阅专栏

本文提供了一个使用JavaScript动态创建并操作HTML下拉列表选项的示例，包括添加和删除分包的功能。通过jQuery简化了DOM操作，展示了如何从数据库读取数据动态填充列表。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>111</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

/**
　*动态的给左边的下拉列表创建选项
　*具体情况可以从数据库读取数据动态创建选项
　*/
$(document).ready(function(){
　　　　for(var i=1;i<=5;i++)
　　　　{
　　　　　　　$("#fb_list").append("<option value='"+i+"'>公开招标小型机采购00"+i+"</option>");　
　　　　}
})
$(function(){
　　$("#add").click(function(){
　　　　　　　if($("#fb_list option:selected").length>0)
　　　　　　　{
　　　　　　　　　　　$("#fb_list option:selected").each(function(){
　　　　　　　　　　　　　　$("#select_list").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
　　　　　　　　　　　　　　$(this).remove();　
　　　　　　　　　　　})
　　　　　　　}
　　　　　　　else
　　　　　　　{
　　　　　　　　　　　alert("请选择要添加的分包！");
　　　　　　　}
　　　})
})
$(function(){
　　　　　　$("#delete").click(function(){
　　　　　　　　　　　if($("#select_list option:selected").length>0)
　　　　　　　　　　　{
　　　　　　　　　　　　　　　$("#select_list option:selected").each(function(){
　　　　　　　　　　　　　　　　　　　　　$("#fb_list").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
　　　　　　　　　　　　　　　　　　　　　$(this).remove();　
　　　　　　　　　　　　　　　})
　　　　　　　　　　　}
　　　　　　　　　　　else
　　　　　　　　　　　{
　　　　　　　　　　　　　　　alert("请选择要删除的分包！");
　　　　　　　　　　　}
　　　　　})
})

</script>
</head>
<body>
<table width="95%" cellpadding="0" align="center" class="listshow" border="1" cellspacing="0">

<tr>
　<td class="black" width="30%" align="center" height="150">
　　　　　　　<select id="fb_list" multiple="multiple"　style="text-align:center;width:300px;height:150px;">
　　　　　　　 </select>　
　　　　</td>
　　　　<td align="center" width="5%">
　　　　<input type="button" id="add" value="添加>>" />
　　　　　　<br/>
　　　　　　<br/>
　　　　　　<input type="button" id="delete" value="<<删除" />
　　　　</td>
　　　　<td class="black" width="30%" align="center">
　　　　<select id="select_list" multiple="multiple" style=" text-align:center;width:300px;height:150px;">
　　　　　　</select>
　　　　</td>
</tr>
</table>

</body>
</html>