现在的位置: 首页 -> 前端学习 -> JS前端 -> select在另一个select结果集中动态的选择添加和删除值

select在另一个select结果集中动态的选择添加和删除值

2014-03-25 00:04 ⁄ 评论数 0 ⁄ 被浏览 6781 views+

不知道怎么描述，就是有两个select下拉，做成文本域那样的，可以从一侧的结果集中选择值，添加到另一侧中；另一侧删掉后，值又重新到结果集那边了。直接看范例演示吧，相信你以前后者以后会用到的！

（就是这种效果，见过吧）

不多说了，上代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>select</title>

$(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>

</select><>

<option value="2014森林人系列">2014森林人系列</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函数，以“@”为分界分割成一个数组。

您可能还会对这些文章感兴趣！

目前有 0 条评论 @我要评论

您的每一个评论都是对我的一份支持

select在另一个select结果集中动态的选择添加和删除值

您可能还会对这些文章感兴趣！

目前有 0 条评论 @我要评论

您的每一个评论都是对我的一份支持

天气小助手

最新文章

最受欢迎

热门排行

最新评论

返回首页