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

最新推荐文章于 2024-03-13 09:25:19 发布
最新推荐文章于 2024-03-13 09:25:19 发布
阅读量3.6k 收藏 4
点赞数 1
分类专栏： jquery 
select下拉框，选中当前某一项，其他下拉框去掉选中的值
效果图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>

</head>
<body>
<div class="video_in">
    <p>
        下拉一
        <select name="B1other1_1" id='B1other1_1' class="select">
            <option value='0'selected></option>
            <option value='1'>选择1</option>
            <option value='2'>选择2</option>
            <option value='3'>选择3</option>
            <option value='4'>选择4</option>
            <option value='5'>选择5</option>
            <option value='6'>选择6</option>
            <option value='7'>选择7</option>
            <option value='8'>选择8</option>
        </select>
    </p>
    <p>
        下拉二
        <select name="B1other2_1" id='B1other2_1' class="select">
            <option value='0'selected></option>
            <option value='1'>选择1</option>
            <option value='2'>选择2</option>
            <option value='3'>选择3</option>
            <option value='4'>选择4</option>
            <option value='5'>选择5</option>
            <option value='6'>选择6</option>
            <option value='7'>选择7</option>
            <option value='8'>选择8</option>
        </select>
    </p>
    <p>
        下拉三
        <select name="B1other3_1" id='B1other3_1' class="select">
            <option value='0'selected></option>
            <option value='1'>选择1</option>
            <option value='2'>选择2</option>
            <option value='3'>选择3</option>
            <option value='4'>选择4</option>
            <option value='5'>选择5</option>
            <option value='6'>选择6</option>
            <option value='7'>选择7</option>
            <option value='8'>选择8</option>
        </select>
    </p>
    <p>
        下拉五
        <select name="B1other4_1" id='B1other4_1' class="select">
            <option value='0'selected></option>
            <option value='1'>选择1</option>
            <option value='2'>选择2</option>
            <option value='3'>选择3</option>
            <option value='4'>选择4</option>
            <option value='5'>选择5</option>
            <option value='6'>选择6</option>
            <option value='7'>选择7</option>
            <option value='8'>选择8</option>
        </select>
    </p>
    <p>
        下拉六
        <select name="B1other5_1" id='B1other5_1' class="select">
            <option value='0'selected></option>
            <option value='1'>选择1</option>
            <option value='2'>选择2</option>
            <option value='3'>选择3</option>
            <option value='4'>选择4</option>
            <option value='5'>选择5</option>
            <option value='6'>选择6</option>
            <option value='7'>选择7</option>
            <option value='8'>选择8</option>
        </select>
    </p>
    <p>
        下拉七
        <select name="B1other5_1" id='B1other6_1' class="select">
            <option value='0'selected></option>
            <option value='1'>选择1</option>
            <option value='2'>选择2</option>
            <option value='3'>选择3</option>
            <option value='4'>选择4</option>
            <option value='5'>选择5</option>
            <option value='6'>选择6</option>
            <option value='7'>选择7</option>
            <option value='8'>选择8</option>
        </select>
    </p>
</div>
</div>

<script>
    $(function(){
        var oldVal="";
        $('.video_in select').each(function() {
            if ($(this).find("option:selected")) {
                var _thisVal = $(this).find('option:selected').val();
                oldVal=$(this).attr("old",_thisVal)
                $('.video_in select').parent().siblings("p").find("option[value="+_thisVal+"]").not("option[value=0]").hide()
            }
        })

        $(".video_in select").change(function(){
            oldVal=$(this).attr("old");
            var _thisVal=$(this).find('option:selected').val();
            var id=$(this).attr("id");
            $(this).parent().siblings("p").find("option[value="+_thisVal+"]").not("option[value=0]").hide();
            $(this).parent().siblings("p").find("option[value="+oldVal+"]").show();
            $(this).find("option[value="+oldVal+"]").show();
            $(this).attr("old",_thisVal)
        })
    })
</script>
</body>
</html>

另一种方法：

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

            }
        });
    });

转自：https://blog.csdn.net/mingqingyuefeng/article/details/78614882

设计师的小猪
关注
专栏目录
antd中select下拉框值为对象选中的问题
ZJW222的博客
11-22 1万+
使用antd中的select下拉框，遇到个小问题，后台管理系统中，使用下拉框，一般不会是简单的就直接使用select中的value值，而是会使用id或者value中文对应的keyword，并且这个在option中的value值也是可能重复的 1.效果图 2.select相关代码 我这里用的是react let list = [ { title: '普通会员', ...
antd vue 多个下拉 联动_antd中select下拉框值为对象选中的问题
weixin_35891744的博客
12-23 2463
使用antd中的select下拉框，遇到个小问题，后台管理系统中，使用下拉框，一般不会是简单的就直接使用select中的value值，而是会使用id或者value中文对应的keyword，并且这个在option中的value值也是可能重复的1.效果图2.select相关代码我这里用的是reactlet list = [{title: '普通会员',id: 1},{title: '测试专用人员',i...
浅谈Vue Element中Select下拉框选取值的问题
12-29
之前写了.一个原生的select的，因为展示效果原因，给删除掉了，忘记保存代码了，现在大家展示使用elementUI的下拉框封装一个组件，供咱们项目中经常调用，减少代码量。 html： <el v-model=ite placeholder=请选择 value-key=mateGroup> <el xss=removed disabled=true value=null> <span xss=removed>周次 </span> <span style
多个select下拉框，选中当前某一项，其他下拉框去掉选中的值
weixin_30733003的博客
03-29 840
前两天在项目开发的时候有个需求是要求多个下拉框，选中某一项后其他下拉框移除该项，虽然写的有点绕，如果那个小伙伴有更好的例子，可以贡献下。先贴几张图看下效果 这是全部下拉框展开的效果图，具体描述看图吧，下面就开始贴代码 html部分 <div class="video_in"> <p> 下拉一 ...
html5 清除下拉框值,jquery 对select标签操作方法 获取选择的值 添加选项和删除选项...
weixin_28884741的博客
06-04 583
1.获取html select标签选中的值$(#mySelect option:selected').val();2.获取html select标签选中的文本内容$(#mySelect option:selected').text();已这个为例name1.val()取到的值是“1”，text() 取得的值是“name1”3.往select标签中添加option选项$("#select_id")....
实现多个下拉框同一批option,选中其一其他框里去除选中的项(不可选择已选过的项)--js
小静的专栏
07-15 6769
html      重置满意度 第一满意度： --请选择--
获取select下拉框中选中option 非value值
weixin_42230479的博客
08-05 233
html <select name="question" id="question" class="input" placeholder="请选择您的保修题"> <option value="ASMS" data-subcategory="门店系统">ASMS </option> <option value="PDA\" data-subcategory="门店系统">PDA App</option> <option value="P
layui怎么给下拉框赋值_layui给select下拉框赋值
weixin_39603469的博客
12-19 4491
转：layui给select下拉框赋值//重新渲染表单函数function renderForm() {layui.use('form', function() {var form = layui.form(); //高版本建议把括号去掉，有的低版本，需要加()form.render();});}//赋值部分$.ajax({url: "",type: "post",dataType: "json"...
Angular4---select下拉框
热门推荐
至尊宝
09-29 3万+
强烈推荐一个大神的人工智能的教程：http://www.captainbed.net/zhanghan 需求 项目中前台使用angular实现,项目中的功能是下拉框配合搜索框实现模糊查询功能.既然可以配合查询条件一起查询,那么也应该可以支持将查询条件去掉,相当于无条件查询结果.示例图如下: 代码实现 <select class="col-sm-3 form-co...
html 中下拉选怎么重置,ruoyi bootstrap-select 下拉多选取值及重置
weixin_42144707的博客
06-02 968
html:这里的下拉列表数据从若依字典里取值渠道：th:value="${dict.dictValue}">搜索重置js声明两个方法：提交时获取多选数据，重置时重置多选下拉框function doSubmit(){var str=[];$("#channels option:selected").each(function () {str.push($(this).val());// 收...
select2好用的 下拉选择框
08-09
select2好用的 下拉选择框 select2好用的 下拉选择框 select2好用的 下拉选择框 select2好用的 下拉选择框 select2好用的 下拉选择框 select2好用的 下拉选择框
elementui select组件实现点击全部，其他选项取消，选择其他选项，全部补选中
qq_45030898的博客
04-27 1046
elementui select组件实现点击全部，其他选项取消，选择其他选项，全部补选中1.场景2.实现 1.场景 场景是这样的： 2.实现 先把选择的数据渲染上去： <el-select collapse-tags class="selects" multiple v-model="selectDeptOptionsValue" pl
下拉框 select 取消选中问题
Mr_LiangDaGe的博客
08-18 3066
select 取消选中问题
el-select选值后，框里值不变
WSL_520的博客
06-19 3909
问题场景：ElementUI下拉框el-select选值后，框里值不变 解决办法：$forceUpdate()，在el-select值改变的时候执行刷新组件 <template> <el-select v-model="value" placeholder="请选择" @change="$forceUpdate()"> <el-option v-for="item in options" :key="item.value" :la
javascript 根据select所选项的不同显示和隐藏部分内容
王伟峰
03-31 4222
<br /><br /><html><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><br /><title>无标题文档</title><br /><style type="text/css"><br /><!--<br />body,td,th {<br /> font-size: 12px;<br />}<br />--><br /></style><br /><script la
element select下拉选项剔除已添加的选项
安可心
04-30 2911
element select下拉选项剔除已添加的选项1.初步代码实现：缺陷：2.修复上一步的 bug缺陷：3.优化 项目中遇到个需求： 货权主体为下拉单选，点击“新增”可以添加多个货权主体，如下图： 要求每次新增一行后，下拉选项需要剔除列表中已添加过的选项，如下图： 1.初步代码实现： 思路： 循环货权主体列表，将已添加选项的 id（value） 组成一个数组，去跟下拉选项的初始数据作对比，筛选出未添加的选项生成新的下拉选项数组，赋值给 select 绑定的变量即可。这些逻辑可以写成一个公用方法。 然后
《手把手教你》系列技巧篇（三十二）-java+ selenium自动化测试-select 下拉框（详解教程）
最新发布
北京-宏哥的博客
03-13 1794
在实际自动化测试过程中，我们也避免不了会遇到下拉选择的测试，因此宏哥在这里直接分享和介绍一下，希望小伙伴或者童鞋们在以后工作中遇到可以有所帮助。
selenium:select下拉框
m0_75092189的博客
04-21 1887
下面代码中第一个option的text开头有三个空格，第二个option的text中间包含三个空格，第三个option的text中包含了3个’ ’。在HTML中“ ”和空格的区别是，在HTML中没输入一个转义字符’ ’就表示一个空格，输入10个页面就显示10个空格位置。而在HTML代码中不管输入多少个空格，最终页面中显示的空格就只有一个。Note:我们会发现不管先选中的时哪一个选项，使用first_selected_option方法时返回的都是最上面那个选项。练习需求：循环选择o1,o2,o3。
VUE + ElementUI select框可多选，但是选中“全部”选项其他不可选
橙汁梨子的博客
06-21 3301
VUE + ElementUI select框可多选，但是选中“全部”选项其他不可选
监听select下拉框选中值
05-24
可以使用 JavaScript 的事件监听来实现监测 `select` 下拉框的选中值。具体实现方法如下： HTML 代码： ```html <select id="mySelect"> 选项1 选项2 选项3 </select> ``` JavaScript 代码： ```javascript ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值