jq下拉框

最新推荐文章于 2024-05-16 14:33:44 发布

xiaozhang___

最新推荐文章于 2024-05-16 14:33:44 发布

阅读量986

点赞数

分类专栏： javaQuery

本文链接：https://blog.csdn.net/xiaozhang___/article/details/80535416

版权

javaQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

下拉框

 
  <!DOCTYPE 
  html 
  > 
 
 
  < 
  html 
  > 
 
 
  < 
  head 
  > 
 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
 
  < 
  title 
  ></ 
  title 
  > 
 
 
  < 
  script 
  src= 
  "../js/jQuery-2.2.2-min.js" 
  ></ 
  script 
  > 
 
 
  
 
 
 
  </ 
  head 
  > 
 
 
  < 
  body 
  > 
 
 
  < 
  table 
  > 
 
 
  < 
  tr 
  > 
 
 
  < 
  td 
  > 
 
 
  < 
  select 
  id= 
  "select1" 
  multiple= 
  "multiple" 
  style= 
  " 
  width 
  : 
  300 
  px 
  ; 
  height 
  : 
  200 
  px 
  " 
  > 
 
 
  < 
  option 
  value= 
  "1" 
  > 
  成都 
  </ 
  option 
  > 
 
 
  < 
  option 
  value= 
  "2" 
  > 
  上海 
  </ 
  option 
  > 
 
 
  < 
  option 
  value= 
  "3" 
  > 
  重庆 
  </ 
  option 
  > 
 
 
  < 
  option 
  value= 
  "4" 
  > 
  浙江 
  </ 
  option 
  > 
 
 
  < 
  option 
  value= 
  "5" 
  > 
  广州 
  </ 
  option 
  > 
 
 
  </ 
  select 
  > 
 
 
  </ 
  td 
  > 
 
 
  < 
  td 
  > 
 
 
  < 
  button 
  id= 
  "add" 
  > 
  > 
  </ 
  button 
  > 
 
 
  < 
  button 
  id= 
  "remove" 
  > 
  < 
  </ 
  button 
  > 
 
 
  < 
  button 
  id= 
  "add_all" 
  > 
  >> 
  </ 
  button 
  > 
 
 
  < 
  button 
  id= 
  "remove_all" 
  > 
  << 
  </ 
  button 
  > 
 
 
  
 
 
 
  </ 
  td 
  > 
 
 
  < 
  td 
  > 
 
 
  < 
  select 
  id= 
  "select2" 
  multiple= 
  "multiple" 
  style= 
  " 
  width 
  : 
  300 
  px 
  ; 
  height 
  : 
  200 
  px 
  " 
  > 
 
 
  </ 
  select 
  > 
 
 
  </ 
  td 
  > 
 
 
  </ 
  tr 
  > 
 
 
  </ 
  table 
  > 
 
 
  </ 
  body 
  > 
 
 
  < 
  script 
  type= 
  "text/javascript" 
  > 
 
 
  $ 
  ( 
  function 
  () { 
 
 
  //选中过去 
 
 
  $ 
  ( 
  "#add" 
  ). 
  click 
  ( 
  function 
  () { 
 
 
  var 
  $option 
  = 
  $ 
  ( 
  "#select1 option:selected" 
  ); 
  //获取选中的选项 
 
 
  $option 
  . 
  appendTo 
  ( 
  "#select2" 
  ); 
  //追加给对方 
 
 
  }); 
 
 
  //选中回来 
 
 
  $ 
  ( 
  "#remove" 
  ). 
  click 
  ( 
  function 
  () { 
 
 
  var 
  $option 
  = 
  $ 
  ( 
  "#select2 option:selected" 
  ); 
 
 
  $option 
  . 
  appendTo 
  ( 
  "#select1" 
  ); 
 
 
  }); 
 
 
  
 
 
 
  //全部过去 
 
 
  $ 
  ( 
  "#add_all" 
  ). 
  click 
  ( 
  function 
  () { 
 
 
  var 
  $option 
  = 
  $ 
  ( 
  "#select1 option" 
  ); 
 
 
  $option 
  . 
  appendTo 
  ( 
  "#select2" 
  ); 
 
 
  }); 
 
 
  //全部回来 
 
 
  $ 
  ( 
  "#remove_all" 
  ). 
  click 
  ( 
  function 
  () { 
 
 
  var 
  $option 
  = 
  $ 
  ( 
  "#select2 option" 
  ); 
 
 
  $option 
  . 
  appendTo 
  ( 
  "#select1" 
  ); 
 
 
  }); 
 
 
  }); 
 
 
  </ 
  script 
  > 
 
 
  </ 
  html 
  > 
 

xiaozhang___

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq下拉框

下拉框&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;&lt;/title&gt;&lt;script src="../js/jQuery-2.2.2-min.js"&gt;&lt;/script&gt;&lt;
复制链接

扫一扫