城市选择案例

最新推荐文章于 2024-04-30 20:37:08 发布

BlogChat

最新推荐文章于 2024-04-30 20:37:08 发布

阅读量328

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/weixin_39134861/article/details/79720653

前端专栏收录该内容

17 篇文章

订阅专栏

//城市选择案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
 <style>
    select {
      width: 200px;
      background-color: teal;
      height: 200px;
      font-size: 20px;
    }
    
    .btn-box {
      width: 30px;
      display: inline-block;
      vertical-align: top;
    }
  </style>
</head>

<body>
<h1>城市选择：</h1>
<select id="src-city" name="src-city" multiple>
  <option value="1">北京</option>
  <option value="2">上海</option>
  <option value="3">深圳</option>
  <option value="4">广州</option>
  <option value="5">西红柿</option>
</select>
<div class="btn-box">
  <!--实体字符-->
  <button id="btn1"> >> </button>
  <button id="btn2"> << </button>
  <button id="btn3"> ></button>
  <button id="btn4"> < </button>
</div>
<select id="tar-city" name="tar-city" multiple>
</select>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
<script>
	$(function(){
		//append()里面必须是jq对象-->element,string,jquery
		//appendTo()里面是对象名里面的东西-->string类型
		$("#btn1").click(function(){
			 // $("#src-city>option").appendTo($("#tar-city"));//这个也ok
			 $("#src-city>option").appendTo("#tar-city");
		});
		$("#btn2").click(function(){
			$("#src-city").append($("#tar-city>option"));
			//$("#src-city").append("#tar-city>option");//这个不行
		});
		$("#btn3").click(function(){
			$("#src-city>option:selected").appendTo("#tar-city");
		});
		$("#btn4").click(function(){
			  $("#src-city").append($("#tar-city>option:selected"));
		});
		
	});
</script>
	</body>
</html>