静态的下拉菜单 选框 删除

来源:互联网 发布:淘宝专享打折怎么设置 编辑:程序博客网 时间:2024/04/20 04:08
      $("#province").change(function(){                  var province=$(this).val();                   if(province == "北京"){                       //选中北京怎么更改城市下拉菜单中的内容                       var city = $("<option  selected='selected'>海淀区</option><option>昌平区</option><option>朝阳区</option><option>大兴区</option>");                       $("#city").html(city);                   }                   if(province == "河北"){                       var city = $("<option  >石家庄</option><option>唐山</option><option>保定</option><option selected='selected'>邢台</option>");                       $("#city").html(city);                   }                   if(province == "山西"){                       var city = $("<option  selected='selected'>运城</option><option>太原</option><option>临汾</option><option>大同</option>");                       $("#city").html(city);                   }               });

            //批量删除,点击删除,删除选中的元素            $("#del").click(function(){                //data表格下有是checked且没有id属性的都删除                $("#data :checked").not("[id]").parent().parent().remove(); //移除所有被选中的input元素            })

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #demo{width:520px; margin:40px auto 0 auto; min-height:250px;}        ul li{line-height:30px; padding:4px 0; font-size:14px; list-style: none}    </style>    <script type="text/javascript" src="jquery.1.12.4.js"></script>    <script>        $(function(){            //选矿的点击事件            $("#all").click(function(){                //判断全选的多选框是否被选中,如果是选中的那就将chenkbox框设置成选中状态的                //否则为默认不选中状态                if(this.checked){                    $(".ch").prop("checked",true);                }else{                    $(".ch").prop("checked",false);                }            });            //全选按钮            $("#quan").click(function(){                $(".ch , #all").prop("checked",true);            });            //全不选            $("#quanbu").click(function(){                $(".ch , #all").prop("checked",false);            })            //反选按钮            //反选时不选中全选的CheckBox框            $("#fan").click(function(){                //遍历选框的默认状态                $(".ch").each(function(){                // !$(this).prop("checked"),,,,,是指点击按钮时,在遍历数组的同时找的默认选中的,                    // 加叹号就是指没选中的,,,,,,                    //再将没选中的选中,而选中的就变为没选中的了                    $(this).prop("checked",!$(this).prop("checked"));                    //点击按钮时,全选框的状态                    chall();                });            });            //多个选框设置点击事件            $(".ch").click(function () {               chall();            });        });        function chall(){            var chnum=$(".ch").size();//选框的总数            //定义一个初始变量            var chk=0;            $(".ch").each(function () {                if($(this).prop("checked")==true){                    //遍历将数据的总数累加纪录                    chk++;                }            });            if(chnum==chk){                $("#all").prop("checked",true);            }else{                $("#all").prop("checked",false);            }        }    </script></head><body><div id="demo">    <ul>        <li><input type="checkbox" class="ch" value="1"/>1.80000</li>        <li><input type="checkbox" class="ch" value="2"/>2.齐天大圣</li>        <li><input type="checkbox" class="ch" value="3"/>3.喜欢你</li>        <li><input type="checkbox" class="ch" value="4"/>4.小跳蛙</li>        <li><input type="checkbox" class="ch" value="5"/>5.全部都是你</li>        <li><input type="checkbox" class="ch" value="6"/>6.七里香</li>    </ul>    <input type="checkbox" id="all" />    <input type="button" class="btn" id="quan" value="全选"/>    <input type="button"  class="btn" id="fan" value="反选"/>    <input type="button"  class="btn" id="quanbu" value="全不选"/>    <input type="button" value="获得选中的所有值" class="btn" id="dz"></div></body></html>