正文
jquery下拉框应用
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="jquery.validate.js"></script>
<!-- 必选先导入jqury包，然后在导入validate包，不然会包jquery未找到错误 -->
<!-- <style>
#select{
width:150px;
/* overflow: hidden;
*/
}
</style> -->
<!-- 左边全部给右边 -->
<script type="text/javascript">
$(function(){
$('button:eq(1)').click(function(event){
var $str=$('#select1 option');
$('#select').append($str);
$('#select1 option:selected').remove();
return false;//这里要取消按钮的默认事件，否则会出现一闪的情况
});
});
</script>
<!-- 右边全部给左边 -->
<script type="text/javascript">
$(function(){
$('button:eq(2)').click(function(event){
var $str=$('#select option');
$('#select1').append($str);
$('#select option:selected').remove();
return false;//这里要取消按钮的默认事件，否则会出现一闪的情况
});
});
</script>
<!-- /*右边给左边加*/ -->
</style>
<script type="text/javascript">
$(function(){
$('button:eq(3)').click(function(event){
var $str=$('#select option:selected');
$('#select1').append($str);
$('#select option:selected').remove();
return false;//这里要取消按钮的默认事件，否则会出现一闪的情况
});
});
</script> </style>
<!-- 左边给右边加 -->
<script type="text/javascript">
$(function(){
$('button:eq(0)').click(function(event){
var $str=$('#select1 option:selected');
$('#select').append($str);
$('#select1 option:selected').remove();
return false;//这里要取消按钮的默认事件，否则会出现一闪的情况
});
});
</script>
<script type="text/javascript">
$(function(){
$('#demoform').validate({
rules:{
username:{
required:true,
minlength:2,
maxlength:10
},
password:{
required:true,
range:[2,16]
},
name:{
required:true
}
},messages:{
username:{
required:'*请输入用户名',
minlength:'最小为2位',
maxlength:'最多为10位'
},
password:{
required:'*请输入用密码',
range:'密码范围为2-16位'
},
name:{
required:'*请不要为空'
}
}
});
});
</script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action='' id='demoform'>
<label for="username">登录账号:</label>
<input type="text" name="username" id="username">
<br>
<label for="password">登录密码:</label>
<input type="password" name="password" id="password">
<br>
<label for="name">主持人名:</label>
<input type="text" name="name" id="name">
<br>
<label for="pindap">负责频道：</label><br>
<select multiple="multiple" id='select1' size=15 style='width: 100px;height: 250px'>
<option value="美丽人生1" selected="selected">美丽人生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>
</select>
<button>>|</button>
<button>>></button>
<button><<</button>
<button>|<</button>
<select multiple="multiple" id='select' size=15 style='width: 100px;height: 250px'>
</select>
<div class="test"></div>
<br>
<input type="submit" value="提交">
</form>
</body>
</html>
<!-- 第一个问题是： 导包问题jquery包必须要在validate包之前导入，否则报错
第二个问题：加入select中的是文本内容而不是value值，更预想的不一样
第三个问题：没有找到脚本,但是脚本仍在加载中 因为缺少了重新加载的$(function(){});
第四个问题：select并不能设置height，可以通过设置size来改变高度
第五个问题：select不能换行，因为一次性都给value赋值了，没有拆分, 其实不需要获取到具体的value,
只需要获取到选择到的既可
-->
