可编辑下拉框

最新推荐文章于 2018-06-19 15:42:34 发布

Shaniya丶

最新推荐文章于 2018-06-19 15:42:34 发布

阅读量760

点赞数

分类专栏： Javascript 文章标签： select js

本文链接：https://blog.youkuaiyun.com/wangshanny/article/details/37660221

版权

Javascript 专栏收录该内容

20 篇文章

订阅专栏

function editable1(selected) {
	if (selected.value == "editable") {
		var dialogMsg = "scroll:yes;status:no;dialogWidth:300px;dialogHeight:400px"; //弹出框设置信息
		var url =  L5.webPath+"/jsp/dcwork/common/formUtil/editselect.jsp";
		showModalDialog(url,"",dialogMsg); //弹出框
	}
}

HTML代码：

<select name="markcode" onChange="editable(this);">
		<option value="">修改选项</option>
		<option value="2">选项一</option>
		<option value="3">选项2</option>
</select>

jsp：

<%@ page contentType="text/html; charset=UTF-8" %>
<% 
	String  formId=request.getParameter("formId");
%>
<html>
<head>
<style type="text/css">
.select-outer { display:inline-block; *display:inline; zoom:1; border:0px solid #ccc; }
.select-inner { display:inline-block; *display:inline; zoom:1; height:340px; overflow:hidden; position:relative; }
.select-h { border:0px solid #ccc; height:350px; position:relative; zoom:1; margin:-1px; }
.select-wh200 { padding:3px; }
.select-wh200 .select-inner { width:290px; }
.select-wh200 select { width:290px; }
.button{
border:1px solid #64c878;
box-shadow: 0 1px 2px #b9ecc4 inset,0 -1px 0 #6c9f76 inset,0 -2px 3px #b9ecc4 inset;
background: -webkit-linear-gradient(top,#90dfa2,#84d494);
background: -moz-linear-gradient(top,#90dfa2,#84d494);
background: linear-gradient(top,#90dfa2,#84d494);
}
</style>
<title>可编辑下拉框</title>
<script language="javascript">
	function watch_ini() { // 初始
		for ( var i = 0; i < arguments.length; i++) {
			var oOption = new Option(arguments[i], arguments[i]);
			document.getElementById("MySelect")[i] = oOption;
		}
	}
	function watch_add(f) { // 增加
		var oOption = new Option(f.word.value, f.word.value);
		f.keywords[f.keywords.length] = oOption;
	}
	function watch_sel(f) { // 编辑
		f.word.value = f.keywords[f.keywords.selectedIndex].text;
	}
	function watch_mod(f) { // 修改
		f.keywords[f.keywords.selectedIndex].text = f.word.value;
	}
	function watch_del(f) { // 删除
		f.keywords.remove(f.keywords.selectedIndex);
	}
	function watch_set(f) { // 保存
		var set = "";
		for ( var i = 0; i < f.keywords.length; i++) {
			set += f.keywords[i].text + ";";
		}
		confirm(set);
	}
</script>

</head>
<body>
	<form name="watch" method="post" action="">
	  <div style="border:0px solid #F00; width:300px; height:350px">
	     <div class="select-outer select-wh200">
              <div class="select-inner">
			    <select id="MySelect" class="select-h" name="keywords" size="10" οnchange="watch_sel(this.form)"></select><br>
				<script language="javascript">
				<!--
				watch_ini('星期三','星期二','星期一'); // 初始关键词
				//-->
				</script>
			  </div>
		 </div>
	 </div>
	 <div style="border:0px solid #F00; width:300px; height:50px">
		<input type="text" name="word" style="width:290px;" /><br />
		<div align="center">
			<input type="button" class="button" value="增加" οnclick="watch_add(this.form);" /> 
		    <input type="button" class="button" value="修改" οnclick="watch_mod(this.form);" /> 
		    <input type="button" class="button" value="删除" οnclick="watch_del(this.form);" /> 
		    <input type="button" class="button" value="保存" οnclick="watch_set(this.form);" /> 
	    </div>
	 </div>
   </form>
</body>
</html>