jQuery 기차표 구 매 도시 선택 전환 기능 실현

효과 도 는 다음 과 같다.


<!DOCTYPE html>
<html>
<head lang="en">
 <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>
 <option value="6">  </option>
 <option value="7">  </option>
 <option value="8">  </option>
</select>
<div class="btn-box">
 <!--    -->
 <button id="btn1"> &gt;&gt; </button>
 <button id="btn2"> &lt;&lt; </button>
 <button id="btn3"> &gt;</button>
 <button id="btn4"> &lt; </button>
</div>
<select id="tar-city" name="tar-city" multiple>
</select>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("#src-city>option").appendTo("#tar-city");
});
$("#btn2").click(function(){
$("#tar-city>option").appendTo("#src-city");
});
$("#btn3").click(function(){
$("#src-city>option:selected").appendTo("#tar-city");
});
$("#btn4").click(function(){
$("#tar-city>option:selected").appendTo("#src-city");
});
});
</script>
</body>
</html>
총결산
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 jQuery 가 기차표 구 매 도시 선택 전환 기능 을 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!

좋은 웹페이지 즐겨찾기