码迷,mamicode.com
首页 > 其他好文 > 详细

下拉列表选择框以及弹框

时间:2021-06-08 22:32:47      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:nbu   style   eee   alert   onclick   打开   new   pre   选中   

<html>
<head>
<title>下拉列表选择框</title>
<script>
alert("请退出");
var flag=confirm("请选择");
if(flag){
alert("欢迎光临");
}else{
alert("手别乱点");
}
var result=prompt("请输入用户名");
alert(result);
</script>
<style type="text/css">

</style>
</head>
<body>
<div id = "s1" style="float:left">
<div>
<select id="select1" multiple="multiple" style="width:100px;height:100px;">
	<option>AAAAAA</option>
	<option>BBBBBB</option>
	<option>CCCCCC</option>
	<option>DDDDDD</option>
	<option>EEEEEE</option>
</select>
</div>
<div>
<input type="button" value="选中添加到右边" onclick="setToRight();"/>
<br/>
<input type="button" value="全部添加到右边" onclick="allToRight();"/>
</div>
</div>
<div id ="s2">

<div>
<select id="select2" multiple="multiple" style="width:100px;height:100px;">
	<option>QQQQQQ</option>
	
</select>
</div>

<div>
<input type="button" value="选中添加到左边"  onclick="setToLeft();"/>
<br/>
<input type="button" value="全部添加到右边" onclick="allToLeft();"/>
</div>
</div>
<script type = "text/javascript">
	function setToRight(){	
		var select1 = document.getElementById("select1");
		var select2 = document.getElementById("select2");
		var options1 =select1.getElementsByTagName("option");
		for(var i=0;i<options1.length;i++){
			var option1 = options1[i];
			if(option1.selected == true){
				select2.appendChild(option1);
				i--;
			}
			}
		}
	function allToRight(){
		var s1 = document.getElementById("select1");
		var s2 = document.getElementById("select2");
		var ops = s1.getElementsByTagName("option");
		for(var j = 0;j<ops.length;j++){
			var ops1 = ops[j];
			s2.appendChild(ops1);
			j--;
			}
		}
	function setToLeft(){
		var s1 = document.getElementById("select1");
		var s2 = document.getElementById("select2");
		var opss=s2.getElementsByTagName("option");
		for(var m = 0;m<opss.length;m++){
			var op = opss[m];
			if(op.selected == true){
				s1.appendChild(op);
				m--;
				}
			}
		}
	function allToLeft(){
		var select2 = document.getElementById("select2");
		var select1 =
		document.getElementById("select1");
		var options1 = select2.getElementsByTagName("option");
		for(var n=0;n<options1.length;n++){
			var opll = options1[n];
			select1.appendChild(opll);
			n--;
			}
		}
</script>
<input id="openButton" type ="button" value="打开窗口">
<input id="closeButton" type ="button" value="关闭窗口">
<input id="gobaidu" type ="button" value="去百度">
<script>
var openButton = document.getElementById("openButton");
var newWindow;
openButton.onclick = function(){
newWindow=open("https://www.baidu.com");}
var closeButton = document.getElementById("closeButton");
closeButton.onclick=function(){
newWindow.close();}
var gobaidu = document.getElementById("gobaidu");
gobaidu.onclick=function(){
location.href="https://baidu.com/";}
</script>
</body>
</html>

下拉列表选择框以及弹框

标签:nbu   style   eee   alert   onclick   打开   new   pre   选中   

原文地址:https://www.cnblogs.com/liang-xp/p/14860778.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!