两个多选select(multiple左右)添加、删除选项和取值实例

网络编程 2024/11/15 佚名

3 2 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>select</title>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js"><script>
$(function(){
$("#car_type_list").dblclick(function(){
  var s_val = this.value;
  if(s_val == '') return;
  $(this).children("option[value='"+s_val+"']").remove();
  $("#car_type").append('<option value="'+s_val+'">'+s_val+'</option>');
  //以下代码作用是将选择到的值备份到一个id为car_type_val的input中，可以进行传值
  $("#car_type_val").val($("#car_type_val").val()+s_val+"@");
  alert($("#car_type_val").val())
});

$("#car_type").dblclick(function(){
  var s_val = this.value;
  if(s_val == '') return;
  $(this).children("option[value='"+s_val+"']").remove();
  $("#car_type_list").append('<option value="'+s_val+'">'+s_val+'</option>');

  var now_val = $("#car_type_val").val();
  now_val = now_val.replace(s_val+"@","");
  $("#car_type_val").val(now_val);
  alert($("#car_type_val").val())
});

})
</script>
</head>

<body>
<input type="hidden" name="car_type" value="" id="car_type_val" /><br/>
<select multiple="multiple" style="min-width:200px; min-height:80px;" id="car_type">
</select><>
<select multiple="multiple" style="min-width:200px; min-height:80px;" id="car_type_list">
<option value="2014森林人系列">2014森林人系列</option>
<option value="2014傲虎系列">2014傲虎系列</option>
<option value="2014力狮系列">2014力狮系列</option>
<option value="2014XV系列">2014XV系列</option>
<option value="WRX STI">WRX STI</option>
<option value="SUBARU BRZ">SUBARU BRZ</option>
<option value="TRIBECA">TRIBECA</option>
</select>
</body>
</html>

其中“<input type="hidden" name="car_type" value="" id="car_type_val" />”这个的作用相当于是一个容器，提交表单的时候可以传值。到接收值的页面，用相应的语言，比如php，就用explode函数，以“@”为分界分割成一个数组。

select,多选select

标签：

select,多选select

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“两个多选select(multiple左右)添加、删除选项和取值实例”

两个多选select(multiple左右)添加、删除选项和取值实例

暂无“两个多选select(multiple左右)添加、删除选项和取值实例”评论...

www.imxmx.com 杰晶网络

8,675无损音乐

1,324高清电影

213破解软件

120,141站长资源

两个多选select(multiple左右)添加、删除选项和取值实例

select,多选select

jquery实现的一个简单进度条效果实例

再谈Jquery Ajax方法传递到action(补充)

评论“两个多选select(multiple左右)添加、删除选项和取值实例”

更新动态

友情链接