关于下拉框列表不可选择相同值的设置二：重置前一项相同选择

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>测试-重置前一项相同选择</title>    <style>        .ipt {            border: 1px solid #ddd;            box-shadow: 0 0 3px rgba(0, 0, 0, 0.17) inset;            transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;            border-radius: 0 !important;            -moz-border-radius: 0 !important;            -webkit-border-radius: 0 !important;            height: 34px;            padding: 0px 5px;            line-height: 30px\9;        }    </style></head><body><div>    description：如果前一个下拉框选择的值和当前值一样则前一个下拉框重置，    以此类推。</div><select class="ipt sortList">    <option value="0">请选择</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></select>

<select class="ipt sortList">    <option value="0">请选择</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></select>

<select class="ipt sortList">    <option value="0">请选择</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></select>

<select class="ipt sortList">    <option value="0">请选择</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></select>

<select class="ipt sortList">    <option value="0">请选择</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></select>

<button onclick="endList()" class="ipt">确定输出最后的值</button><p></p><script src="//cdn.bootcss.com/jquery/2.2.3/jquery.js"></script><script>    var _this=‘‘;    $(".sortList").on({        click:function(){            _this=$(this).find("option:selected").val();            console.log("操作click时的值:"+_this);        },        change:function(){            chageSort(this);        }    });

function chageSort(thx){        console.log(thx);        var sortList=$(".sortList");       /*注：index()用法: http://www.jb51.net/article/46769.htm*/        var _index=$(thx).index()-1;        console.log(‘当前元素下标：‘+_index);        var _changeThis=$(thx).find("option:selected").val();        console.log("change事件后当前值："+_changeThis);       /* for(var i=0;i<sortList.length;i++){            var isSelectedVal=sortList.eq(i).find("option:selected").val();            console.log("选择列表的各项值:"+isSelectedVal);        }*/        for(var j=0;j<sortList.length;j++){            var beforeVal=sortList.eq(j).find("option:selected").val();            if(beforeVal==_changeThis && j!=_index){                console.log(‘j:‘+j);                /*注：法一：方法可行，但是不好*/                /*sortList.eq(j).html(‘<option value="0">请选择</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>‘);*/                /*注：法二：attr存在不可多次触发的bug，换prop*/                sortList.eq(j).find("option[value=‘0‘]").prop("selected","selected");            }        }    }

function endList(){        var arr=[];        var list=$(".sortList");        for(var i=0;i<list.length;i++){            arr.push(list.eq(i).find("option:selected").val());        }        document.querySelectorAll("p")[0].innerHTML=arr;    }</script></body></html>

时间： 2024-12-18 02:01:38

关于下拉框列表不可选择相同值的设置二：重置前一项相同选择的相关文章

GridView 中绑定DropDownList ,下拉框默认选中Label的值

在GridView中,我们有时候要绑定值. 前台绑定的代码可以这样 <asp:TemplateField HeaderText="当前状态" ItemStyle-HorizontalAlign="Center"> <EditItemTemplate> <asp:DropDownList ID="dStatus" DataSource='<%#BindStatus()%>' DataTextField=&

获取下拉框第一个选项的值、最后一个选项的值、第二个选项的值

//假设网页里有下面这样一个下拉框 <select id="angelweb"> <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> <

JavaScript获取select下拉框中的第一个值

JavaScript获取select下拉框中的第一个值 1.说明获取select下拉框中的第一个值 2.实现源代码 <!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/xhtm

jq select change下拉框选项变化判断选中值,添加（attr)或移除(removeAttr)一个或多个属性

select change下拉框选项变化判断选中值,添加(attr)或移除(removeAttr)一个或多个属性 $("#IsRecommend").change(function () { var isCheck = $(this).children('option:selected').val(); if (isCheck == "true") { $("#CategoryId").css("display", "

关于下拉框列表不可选择相同值的设置一：当前DOM不可选

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>测试-当前元素不可选</title><style> .ipt { border: 1px solid #ddd; box-shadow: 0 0 3px rgba(0, 0, 0, 0.17) inset; transition: border 0.

动态加载下拉框列表并添加onclick事件

1. js动态加载元素并设置属性摘自(http://www.liangshunet.com/ca/201408/336848696.htm) <div id="parent"></div> function addElementDiv(obj) { var parent = document.getElementById(obj); //添加 div var div = document.createElement("div"); //设

点击select下拉框获取option的属性值

select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下,结果一运行悲催了,怎么点击option事件就是不会执行.这是为什么呢,刚开始也不懂,之前没遇到过这样的需求,后来经过学习,才恍然大悟,原来select option没有点击事件,要想获得所选option的属性值,需要通过jquery的change()方法来获取,下面通过代码解释一下,代码如下: <

javascript 可多选的下拉框 multiselect 动态删除option值，动态添加option值，动态生成表格

首先引用一个写的很好的博客http://www.cnblogs.com/landeanfen/p/5013452.html 我使用的是bootstrap-multiselect,实现功能是选择下拉框中的某几项数据后,通过点击add按键,可以将数据动态的添加到一个table中: 移除掉下拉框中的这几项: 删除table中的某行数据,对应的下拉框中会再添加这些值. bootstrap-multiselect源码主页:https://github.com/davidstutz/bootstrap-m

angular.js 下拉框选中根据后台返回值

前景,根据后台返回值选中某个项 <!DOCTYPE html><html><head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app=&qu