码迷,mamicode.com
首页 > 其他好文 > 详细

多个select下拉框,选中当前某一项,其他下拉框去掉选中的值

时间:2017-03-29 17:27:10      阅读:307      评论:0      收藏:0      [点我收藏+]

标签:其他   wrap   多个   开始   项目   als   strong   on()   htm   

前两天在项目开发的时候有个需求是要求多个下拉框,选中某一项后其他下拉框移除该项,虽然写的有点绕,如果那个小伙伴有更好的例子,可以贡献下。先贴几张图看下效果

技术分享技术分享技术分享技术分享技术分享

这是全部下拉框展开的效果图,具体描述看图吧,下面就开始贴代码

html部分

<div class="video_in">
        <p>
            下拉一
            <select name="B1other1_1" id=B1other1_1 class="select">
                <option value=0>请选择</option>
                <option value=1>选择1</option>
                <option value=2 selected>选择2</option>
                <option value=3>选择3</option>
                <option value=4>选择4</option>
            </select>
        </p>
        <p>
            下拉二
            <select name="B1other2_1" id=B1other2_1 class="select">
                <option value=0>请选择</option>
                <option value=1>选择1</option>
                <option value=2>选择2</option>
                <option value=3 selected>选择3</option>
                <option value=4>选择4</option>
            </select>
        </p>
        <p>
            下拉三
            <select name="B1other3_1" id=B1other3_1 class="select">
                <option value=0>请选择</option>
                <option value=1>选择1</option>
                <option value=2>选择2</option>
                <option value=3>选择3</option>
                <option value=4 selected>选择4</option>
            </select>
        </p>
        <p>
            下拉五
            <select name="B1other4_1" id=B1other4_1 class="select">
                <option value=0>请选择</option>
                <option value=1>选择1</option>
                <option value=2>选择2</option>
                <option value=3>选择3</option>
                <option value=4>选择4</option>
            </select>
        </p>
        <p>
            下拉六
            <select name="B1other5_1" id=B1other5_1 class="select">
                <option value=0>请选择</option>
                <option value=1>选择1</option>
                <option value=2>选择2</option>
                <option value=3>选择3</option>
                <option value=4>选择4</option>
            </select>
        </p>
    </div>
    </div>

 

js部分

$(document).ready(function() {
        var oldvalue = "";      //上一次选中的值
        var currentvalue = "";  //当前选中的值

        $(.video_in select).each(function() {
            // 默认选中的值
            if ($(this).find("option:selected")) {
                oldvalue = $(this).attr(old);
                var id = $(this).attr(id);
                currentvalue = $(this).find(option:checked).val();
                $(this).attr(old, currentvalue);
                // 如果this下的某一项被选中,则not这个select find option[value=当前选择的值]外面添加other标签
                // .not(‘option[value=0]‘) 该项是select的第一项 默认value为0
                $(.video_in select).not(# + id).find(option[value= + currentvalue + ]).not(option[value=0]).wrap(<other></other>)
            }
        })
        $(.video_in select).change(function(e) {
            oldvalue = $(this).attr(old);
            currentvalue = $(this).find(option:checked).val();
            var id = $(this).attr(id);
            if (oldvalue != "0") {
                if(currentvalue==0){    //当前选择值等于0的一项 => 第一项(请选择)
                    if($(.video_in select).find(option[value=0]).parent().hasClass("select")){
                        $(.video_in select).not(# + id).find(option[value= + oldvalue + ]).unwrap();    //unwrap 移除other
                        $(this).attr(old, currentvalue);   //更新oldvalue的值 已便下次使用
                        return false;
                    }
                }else{
                    $(.video_in select).not(# + id).find(option[value= + oldvalue + ]).unwrap();
                    $(.video_in select).not(# + id).find(option[value= + currentvalue + ]).wrap(<other></other>);
                    $(this).attr(old, currentvalue);  //更新oldvalue的值 已便下次使用
                    if( $(.video_in select).find(option[value=0]).parent().hasClass("select")){
                        return false;
                    }
                    $(.video_in select).find(option[value=0]).unwrap();

                }
            }else{
                $(.video_in select).not(# + id).find(option[value= + currentvalue + ]).wrap(<other></other>);
                $(this).attr(old, currentvalue);   //更新oldvalue的值 已便下次使用
                if( $(.video_in select).find(option[value=0]).parent().hasClass("select")){     //如果请选择  退出
                    return false;
                }
                $(.video_in select).not(# + id).find(option[value= + oldvalue + ]).unwrap()

            }
        });
    });

 

css自己调整就好了 

 

多个select下拉框,选中当前某一项,其他下拉框去掉选中的值

标签:其他   wrap   多个   开始   项目   als   strong   on()   htm   

原文地址:http://www.cnblogs.com/learnmo/p/6640706.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!