为什么Doris要使用到mysql 为什么要用select

转载

小鱼儿 2023-12-19 23:42:10

文章标签 为什么Doris要使用到mysql ci html 下拉框 文章分类 MySQL 数据库

一、碎碎念：select框是我们平时在页面中很常见的页面元素之一，今天我想总结一下自己目前为止学到的一些关于select的用法，欢迎大家补充。

二、select的两种用途

1、select的用法之一：制作联动。

联动效果在页面中多用于选择省份和城市，以下将示例一个二级联动。

<!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" />
<title>二级联动</title>
<script type="text/javascript">
var JSONObject=[					//json对象存储数据
			{'sheng':'黑龙江省',
		 	'city':['哈尔滨市','双鸭山市','佳木斯市','大庆市','齐齐哈尔'],
		 	},
	   	 	{'sheng':'吉林省',
		 	'city':['长春市','白山市'],
		 	},
			{'sheng':'山东省',
		 	'city':['青岛','济南','蓬莱','日照','泰安'],
		 	}
			]	

window.onload=function(){					//加载页面时执行的函数
		var sheng=document.getElementById("sheng");	//获取id为“sheng”的下拉框
		var cityl = document.getElementById("city");//获取id为“city”的下拉框
		//var opCity=city.getElementsByTagName("option");		
		for(var i in JSONObject){		//循环遍历json对象 将每一条数据中的“sheng”添加到第一个select中
			sheng.options.add(new Option(JSONObject[i].sheng));					 	
		}			
}
function test(){	//当select的选值改变时，执行此函数
		var sheng=document.getElementById("sheng");	//这里我进行了重复的定义，虽然变量名一样，但是在不同的函数中，不能通用，cityl也是如此
  	 	var op=sheng.getElementsByTagName("option");		 
		var cityl = document.getElementById("city");//	
		for(var j in op) {//循环遍历第一个下拉框中的option对象
			//console.log(JSONObject[j].city);
			//console.log(op[j].selected);
				if (op[j].selected && cityl.options.length) {	//	如果某个option被选中并且第二个下拉框中含有option		
					cityl.options.length = 0//把第二个下拉框，即表示城市的下拉框清空
					for(var r in JSONObject[j].city){
					//循环遍历json对象中的每一条数据中的“city”，并为当前选中的省的城市创建option添加到第二个下拉框中
						cityl.options.add(new Option(JSONObject[j].city[r]));
					}	
					//console.log(JSONObject[j].city);
					break;//break我会在后面说起~~
				}else{
					console.log("加油喽！！！");
				}	
		}
 }
</script>
</head>
<body>
	<div>
		请选择省份：
		<select id="sheng" onchange="test();">
		</select>
	</div>
	<div>
		请选择城市：
		<select id="city">
			<option>请选择</option>
		</select>
	</div>	
<body>
</html>

运行之后的效果如下：

为什么Doris要使用到mysql 为什么要用select_html

之前写过一篇关于这个二级联动的效果，有兴趣的同学可以去看看帮我提提意见~二级联动：

2、select用法之二：多选择

以下将展示一个应用到多选择的例子：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<title>select练习</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style>
	select{
		width:100px;
		height:160px;
		}
	.float{
		float:left;
		}
	.float_btn{
			width: 160px;
			margin:auto 10px;
		}
	.clearfloat{
		clear:both;
		}
	span{
		background-color:#c0c0c0;
		border:1px solid #999;
		margin:10px;
		}
</style>
<script type="text/javascript">
$(function(){
	$("#button1").click(function(){
		$("#select1 option").each(function(){
			//console.log(this.selected);
			if(this.selected){
				$("#select2").append("<option>"+$(this).val()+"</option>");
				this.remove();
				}
			});
		});
	$("#button2").click(function(){
		$("#select1 option").each(function(){			
				$("#select2").append("<option>"+$(this).val()+"</option>");
				this.remove();				
			});
		});
	$("#button3").click(function(){
		$("#select2 option").each(function(){
			if(this.selected){
				$("#select1").append("<option>"+$(this).val()+"</option>");
				this.remove();
　　　　　　　　　　　　　　　　　　}				
			});
		});
	$("#button4").click(function(){
		$("#select2 option").each(function(){		
				$("#select1").append("<option>"+$(this).val()+"</option>");
				this.remove();
			});
		});		
});	
</script>
</head>
<body>
  <div class="float">
	<select multiple="multiple" id="select1">
	　　<option value="1">1</option>
    	　　<option value="2">2</option>
        　　<option value="3">3</option>
       　　 <option value="4">4</option>
        　　<option value="5">5</option>
        　　<option value="6">6</option>
        　　<option value="7">7</option>
    	　　<option value="8">8</option>
        　　<option value="9">9</option>
        　　<option value="10">10</option>
        　　<option value="11">11</option>
        　　<option value="12">12</option>
        　　<option value="13">13</option>
    	　　<option value="14">14</option>
        　　<option value="15">15</option>
        　　<option value="16">16</option>
        　　<option value="17">17</option>
        　　<option value="18">18</option>
	</select>
  </div>  
  <div class="float float_btn">
 　　<button id="button1">选中添加到右边>|</button>
    <button id="button2">全部添加到右边>></button>
    <button id="button3">删除添加到左边|<  </button>
    <button id="button4">全部删除添加到左边<< </button>
  </div>
   <div class="float">
	<select multiple="" id="select2">
	</select>
  </div>  
<div class="clearfloat"></div>
</body>
</html>

效果如下：

为什么Doris要使用到mysql 为什么要用select_ci_02

用户可以利用ctrl键来进行多选，选中目标之后点击按钮完成想要进行的动作，将左边的选项添加到右边，或者将右边的选项添加到左边，当然，全部移动也是可以的。

整体的思路：当点击”选中添加到右边“的按钮时，循环遍历左边的select中的每一项，检查selected属性，将选中的选项添加到右边的select框中，并将选中的选项利用remove方法删除。同理，当点击”删除添加到左边“的选项时循环遍历右边的select框。一旦点击”全部添加到右边“或者”全部删除添加到左边“，则直接将左边（或右边）select中的选项全部添加到右边（或左边）的select框中，并在之后进行删除操作。

三、结语：本来是很想细致的讲一下学习jQuery的过程的，太饿了。。。写不下去了。嗯，今天就写到这里啦！

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。