首页 / JAVASCRIPT / JavaScript用例之省市联动选择器

JavaScript用例之省市联动选择器

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript用例之省市联动选择器，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含14364字，纯文字阅读大概需要21分钟。

内容图文

介绍
本实例主要实现一个省市联动选择器可对表格内容进行筛选（主要针对表格）。实例需求为先选择省份，根据选择的省份可以选择对应省份下面的市级，支持多选。点击选择器上的对应按钮即为选择该城市，再次点击已选城市即为取消选择该城市
已选项目将展示在指定的展示区域，需求：当选择省份时显示省份，当选择了该省份下面对应的城市时，显示选择的城市名，隐藏省份名，展示区域支持删除已选项，当对应省份的所有已选城市被删除时，显示该省份，当删除省份时，选择器中的对应省份的市级选择区域消失即未选择省份就无法选择市级城市。已选项目展示区域支持收缩隐藏及列表展开。
省市数据是通过TP5获取的，在js中会有ajax获取数据，在页面开发阶段可以自己模拟数据布局，
布局采用bootstrap，功能引入jquery，数据通过thinkphp获取mysql库数据
页面布局：
html页面部分只是做一个框架搭建，主要通过js中获取到数据之后进行页面的整体绘制。

省市联动选择器

归属地筛选

    </ul>
    <p class="choosen-list-all right">全部</p>
    <p class="clearfix"></p>
</div>
<div class="clearfix"></div>

<div class="choose-list right" id="choose_list">
    <ul id="myTab" class="nav nav-tabs">
        <li class="active col-md-6">
            <a href="#provinceList" data-toggle="tab">选择省份</a>
        </li>
        <li class="col-md-6">
            <a href="#cityList">选择城市</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade in active" id="provinceList">
            <ul>

            </ul>
        </div>
        <div class="tab-pane fade" id="cityList">
            <div class="city-box">
                <ul>

                </ul>
            </div>

        </div>
    </div>
    <hr class="hr-line">
    <div class="choose-btn-group">
        <button class="btn reset-btn">重置</button>
        <button class="btn cancel-btn">取消</button>
        <button class="btn affirm-btn">确认</button>
    </div>
</div>
<div class="table-plane col-md-12">
    <table id="myTable" class="col-md-12">

    </table>
</div>

css样式代码根据装载环境自行定义，要能融入整体分隔，本demo开发时基于页面为深色背景，样式代码仅供参考：
html,body{
height: 100%;
background-color: #101A22;
}
li{
list-style: none;
text-align: center;
}
ul{
padding: 0;
margin: 0;
}
.left{
float: left;
}
.right{
float: right;
}

.choose-btn{
width: 100%;
font-size: 16px;
padding: 0;
line-height: 38px;
background: linear-gradient(to bottom,#04C7FF,#169AFF);
}
.choosen-list-all{
width: 80px;
height: 30px;
text-align: center;
background: linear-gradient(to top,#656b83,#8892b4);
display: inline-block;
line-height: 30px;
color: #dde4f3;
margin-top: 4px;
margin-bottom: 4px;
margin-right: 10px;
cursor: pointer;
}
.choosen-list-item{
width: 80px;
height: 30px;
text-align: center;
background: #53688e;
display: inline-block;
line-height: 30px;
color: #dde4f3;
margin: 4px 5px;
}
.choosen-list-item-text{
width: 56px;
overflow: hidden;
display: inline-block;
height: 30px;
}
.btn-box{
width: 135px;
}

.border-blue{
border: 1px solid blue;
}
.border-red{
border: 1px solid red;
}
.choose-city{
max-width: 840px;
}
.del-choosen{
float: right;
vertical-align: middle;
margin-top: 3px;
cursor: pointer;
}
.choose-list{
width: 260px;
display: none;
height: 356px;
background-color: #343c4c;
color: #DDE4F3;
border-radius: 4px;
position: absolute;
right: 11px;
top: 40px;
border: 1px solid #515C70;
z-index: 1000;
}
#choose_list>.nav-tabs>li.active>a,
#choose_list>.nav-tabs>li.active>a:hover,
#choose_list>.nav-tabs>li.active>a:focus {
color: #009FDA;
background-color: transparent;
border: none;
border-bottom:4px solid #009fda ;
cursor: default;
}
#choose_list>.nav-tabs>li>a{
border-bottom:2px solid #009fda ;
line-height: 30px;
font-size: 14px;
color: #dde4f3;
}
#choose_list>.nav-tabs>li>a:hover{
background-color: #2B323F;
border: none;
color: #009FDA;
border-bottom:2px solid #009fda ;
}
#choose_list>.nav-tabs{
border: none;
}
#choose_list>.nav-tabs>li:first-child,
#choose_list>.nav-tabs>li:first-child>a{
padding-right: 0;
margin-right: 0;
}
#choose_list>.nav-tabs>li:last-child,
#choose_list>.nav-tabs>li:last-child>a{
padding-left: 0;
margin-left: 0;
}
.provience-list-item{
float: left;
width: 70px;
height: 30px;
background-color: #2B323F;
border: 1px solid #515C70;
line-height: 30px;
margin-left: 5px;
margin-right: 5px;
margin-top: 10px;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
}
#provinceList>ul{
height: 240px;
padding-left: 8px;
padding-right: 6px;
overflow-y: scroll;
}
.city-box{
height: 240px;
padding-left: 8px;
padding-right: 6px;
overflow-y: scroll;
}
::-webkit-scrollbar {/滚动条整体样式/
width: 4px; /高宽分别对应横竖滚动条的尺寸/
height: 4px;
}
::-webkit-scrollbar-thumb {/滚动条里面小方块/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(255,255,255,0.2);
}
::-webkit-scrollbar-track {/滚动条里面轨道/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(255,255,255,0.1);
}
.hr-line{
margin-top: 10px;
margin-left: auto;
margin-right: auto;
width: 230px;
border-top: 1px solid #515C70;
margin-bottom: 10px;
}
.reset-btn,.cancel-btn,.affirm-btn{
width: 70px;
height: 30px;
text-align: center;
color: #fff;
font-size: 12px;
padding: 0;
}
.reset-btn{
background: linear-gradient(to top,#656b83,#8892b4);
margin-right: 6px;
}
.affirm-btn{
margin-left: 6px;
background: linear-gradient(to bottom,#04C7FF,#169AFF);
}
.choose-btn-group{
margin-left: 15px;
}
.has-choose{
/background: linear-gradient(to bottom,#04C7FF,#169AFF);/
background-image: url("…/img/choosen.png");
background-repeat: no-repeat;
background-position: right top;
background-color:#04C7FF!important;
/background-color:#169AFF;/
}
.pro-title{
padding: 0px 16px;
color: #dde4f3;
line-height: 30px;
font-size: 12px;
display: inline-block;
border-radius: 4px;
border:1px solid #515C70;
}
.city-list-item-pro{
color: #515C70;
clear: both;
}
.city-list-item-pro h5{
margin-bottom: 0;
}
.city-list-item {
float: left;
width: 70px;
height: 30px;
background-color: #2B323F;
border: 1px solid #515C70;
line-height: 30px;
margin-left: 5px;
margin-right: 5px;
margin-top: 10px;
border-radius: 4px;
cursor: pointer;
overflow: hidden;
}
.city-ul-box li:last-child{
clear: right;
}
.provhidden{
display: none!important;
}
.table-plane{
background-color: #2B323F;
}
#myTable tbody tr{
height: 36px;
color: #CBD4F4;
}
#myTable thead tr th{
background-color: #101A22;
color: #CBD4F4;
}
#myTable tr.odd {
background-color: #515C70;
}
.tr-hide{
display: none!important;
}
.tr-show{
}
JS功能方法：
1、获取数据：
$(function () {
$.ajax({
url: “getCity”,
type:“post”,
success:function(result){
result = eval(’(’ + result + ‘)’)
var prodata = result.prodata?result.prodata:[];
var citydata = result.citydata?result.citydata:[];
drawChoosePage(prodata,citydata);
}
});
});
2、通过数据绘制页面
//绘制选择器
function drawChoosePage(prodata,citydata){
//省份页面
for(var i=0;i<prodata.length;i++){
$("#provinceList ul").append(’

’+prodata[i].area_name+’

’)
}
//市级页面——添加省份.city-ul-box
for(var i=0;i<prodata.length;i++){
$("#cityList .city-box").append(’

’ +
‘
————’ +
‘’+prodata[i].area_name+’’ +
‘————’ +
‘
’ +
‘

’)
}
//市级页面——添加城市
for(var i=0;i<prodata.length;i++){
for(var j=0;j<citydata.length;j++){
if(citydata[j].province_idprodata[i].area_id){
$(".city-ul-box").eq(i).append(’

’+citydata[j].area_name+’

’)
}
}
}
//市级页面——去除浮动保证间距
$(".city-ul-box").append(’

’);
//增加未选择省份提示
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#?cityList .city-…(".city-list-item").length;i++){
if($(".city-list-item").eq(i).text()“市辖区”){
$(".city-list-item").eq(i).prev().siblings().hide();
}
}
//隐藏市级页面
$(".city-ul-box").hide();
}
//标签页激活
$(’#myTab a’).click(function (e) {
e.preventDefault();
$(this).tab(‘show’)
});
//点击按钮切换城市选择框的出现与消失
var showOrHide = false;
$(function () {
$("#choose_btn").click(function (event) {
if(showOrHidefalse){
$("#choose_list").fadeIn();
$(document).one(“click”, function ()
{
$("#choose_list").fadeOut();
showOrHide = false;
});
showOrHide = true;
}else {
$("#choose_list").fadeOut();
showOrHide = false;
}
event.stopPropagation();//阻止事件向上冒泡
});
$("#choose_list").click(function (event)
{
event.stopPropagation();//阻止事件向上冒泡
});
$("#choosen_box").click(function (event)
{
event.stopPropagation();//阻止事件向上冒泡
});
});
//点击城市选择城市与取消选择
//省份
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#?provinceList').…(this).text(),
area =

(this).data(&#x27;area&#x27;), level =

(this).data(′area′),level=(this).data(‘level’);
if($(this).hasClass(‘has-choose’)){ //已被选中
var len = $(".choosen-list-item").length;
for(var i=0; i<len; i++){
var chooselevel= $(".choosen-list-item").eq(i).data(‘level’);
if(chooselevel == 1){
var choosearea = $(".choosen-list-item").eq(i).data(‘area’);
if(choosearea == area){
$(".choosen-list-item").eq(i).addClass(‘removelist’);
}
}else{
var chooseprov = $(".choosen-list-item").eq(i).data(‘prov’);
if(chooseprovarea){
KaTeX parse error: Expected 'EOF', got '}' at position 70: … }? } …(’.provience-list-item’).length;
for(var i=0;i<provlen;i++){
if($(’.city-ul-box’).eq(i).data(‘area’)==area){
$(’.city-ul-box’).eq(i).children().removeClass(‘has-choose’);
KaTeX parse error: Expected 'EOF', got '}' at position 48: … }? } …(’.provience-list-item’).length;
for(var i=0;i<provlen;i++){
if($(’.city-ul-box’).eq(i).data(‘area’)==area){
$(’.city-ul-box’).eq(i).hide();
$(’.city-without-prov’).show();
$(".choosen-list-all").html(‘全部’);
}
}
}
$(’.removelist’).remove();
$(this).removeClass(‘has-choose’);
}else{
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#?choosen_box .ch…(’.provience-list-item’).length;
for(var i=0;i<len;i++){
if($(’.city-ul-box’).eq(i).data(‘area’)==area){
$(’.city-without-prov’).hide();
$(’.city-ul-box’).eq(i).show();
}
}
$(this).addClass(‘has-choose’);
$(".choosen-list-all").html(‘收起全部’);
}
deleteChoose();
changeTable();
});
//城市
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#?cityList').off(…(this).text(),
area =

(this).data(&#x27;area&#x27;), level =

(this).data(′area′),level=(this).data(‘level’),
prov =

(this).data(&#x27;prov&#x27;), title=

(this).data(′prov′),title=(this).attr(‘title’);
// console.log(title);
if($(this).hasClass(‘has-choose’)){ //已被选中
var len = KaTeX parse error: Expected '}', got 'EOF' at end of input: …var choosearea=(".choosen-list-item").eq(i).data(‘area’);
if(choosearea == area){
$(".choosen-list-item").eq(i).addClass(‘removelist’);
break;
}
}
KaTeX parse error: Expected '}', got 'EOF' at end of input: … if((".choosen-list-item").eq(i).data(‘prov’)prov){
count++;
}
}
// console.log(count);
if(count0){
var hiddenlen = KaTeX parse error: Expected '}', got 'EOF' at end of input: … if((’.provhidden’).eq(i).data(‘area’)==prov){
// $(’.provhidden’).eq(i).show();
$(’.provhidden’).eq(i).removeClass(‘provhidden’);
}
}
}
$(this).removeClass(‘has-choose’);
}else{
$("#choosen_box .choose-city").append(’

’+
‘’+text+’’+
‘ JavaScript用例之省市联动选择器 - 文章图片

’+
‘

’);

    var len = $(".choosen-list-item").length;
    for(var i=0;i<len;i++){
        var choosearea=$(".choosen-list-item").eq(i).data('area');
        if(choosearea == prov){
            $(".choosen-list-item").eq(i).addClass('provhidden');
            // $(".choosen-list-item").eq(i).hide();
        }
    }
    $(this).addClass('has-choose');
    $(".choosen-list-all").html('收起全部');
}
deleteChoose();
changeTable();

});
//点击隐藏选择列表
$(function () {
var isshow = true;
$(’.choosen-list-all’).click(function () {
if(isshow){
$(".choose-city").hide();
$(".choosen-list-all").html(‘展开全部’);
isshow=false;
}else {
$(".choose-city").show();
$(".choosen-list-all").html(‘收起全部’);
isshow=true;
}
});
});
//删除已选项
function deleteChoose(){
$(".del-choosen").off(‘click’).on(‘click’,function () {
var areano = $(this).parent().data(‘area’),
level = $(this).parent().data('level'), prov=$ (this).parent().data(′level′),prov=(this).parent().data(‘prov’),
li = $(this).parent();
li.remove();
if(level==1){
var len = KaTeX parse error: Expected '}', got 'EOF' at end of input: … var area=(".provience-list-item").eq(i).data(‘area’);
if(area == areano){
KaTeX parse error: Expected 'EOF', got '}' at position 102: … }? } …(’.city-ul-box’).eq(i).data(‘area’)==areano){
$(’.city-ul-box’).eq(i).hide();
}
}
}else{
var len = KaTeX parse error: Expected '}', got 'EOF' at end of input: … var area=(".city-list-item").eq(i).data(‘area’);
if(area == areano){
KaTeX parse error: Expected 'EOF', got '}' at position 97: … }? } …(".choosen-list-item").eq(i).data(‘prov’)prov){
count++;
}
}
if(count0){
var hiddenlen = KaTeX parse error: Expected '}', got 'EOF' at end of input: … if((’.provhidden’).eq(i).data(‘area’)==prov){
$(’.provhidden’).eq(i).removeClass(‘provhidden’);
}
}
}
}
changeTable();
});
}
//重置选择
$(’.reset-btn’).click(function () {
$(’.choosen-list-item’).remove();
$(".choosen-list-all").html(‘全部’);
$(’.provience-list-item’).removeClass(‘has-choose’);
$(’.city-list-item’).removeClass(‘has-choose’);
$(’.city-ul-box’).hide();
$(’.city-without-prov’).show();
});
//确认选择
$(’.affirm-btn’).click(function () {
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#?choose_list").f…(’.choosen-list-item’).length;i++){
if(KaTeX parse error: Expected '}', got 'EOF' at end of input: … condition[i]=(’.choosen-list-item’).eq(i).text();
}

//调用处理页面表格数据
clear_arr_trim(condition);
if(condition.length>0){
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#?myTable tbody t…(’#myTable tbody tr’).length;j++){
for(var i=0;i<condition.length;i++){
var tablecity = $(’#myTable tbody tr’).eq(j).children().eq(3).text();
if(tablecity.split(" “)[0]==condition[i] || tablecity.split(” “)[1]==condition[i]){
$(’#myTable tbody tr’).eq(j).addClass(‘tr-show’).removeClass(‘tr-hide’);
}
}
}
$(”#myTable_info").html(’’ +
‘共’ +
’ 1 ’ +
‘页，筛选之后共’ +
’ 18 ’ +
‘条，初始’ +
’ 18 ’ +
‘条’ +
‘’);
$('.change-total').html($ (′.change?total′).html((’.tr-show’).length);
$('.old-total').html($ (′.old?total′).html((’#myTable tbody tr’).length)
}else{
$(’#myTable tbody tr’).removeClass(‘tr-hide’).removeClass(‘tr-show’);
}

}
function clear_arr_trim(array) {
for(var i = 0 ;i<array.length;i++)
{
if(array[i] == " " || typeof(array[i]) == “undefined”)
{
array.splice(i,1);
i= i-1;
}
}
return array;
}

内容总结

以上是互联网集市为您收集整理的JavaScript用例之省市联动选择器全部内容，希望文章能够帮你解决JavaScript用例之省市联动选择器所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/782511.html

来源：【匿名】

【上一篇】javascript – 下拉菜单可以编辑吗？【下一篇】javascript 怎么调用php方法

更多 ►

【JavaScript用例之省市联动选择器】教程文章相关的互联网学习教程文章

使用jQuery在对象中缓存选择器的简单方法

当使用像jQuery这样的库时，开发者通常会使用选择器来访问和操作DOM中的元素。当一个选择在页面上被反复的访问时，把它缓存起来以获得更好的性能是个不错的想法。让我们看一个例子, jQuery(document).ready(function() {jQuery(#some-selector).on(hover, function() {jQuery(this).fadeOut(slow).delay(400).fadeIn();console.log(jQuery(this).text());});jQuery(#another-element).on(hover, function() {jQuery(this).slideU...

使用jQuery在对象中缓存选择器的简单方法_jquery

当使用像jQuery这样的库时，开发者通常会使用选择器来访问和操作DOM中的元素。当一个选择在页面上被反复的访问时，把它缓存起来以获得更好的性能是个不错的想法。让我们看一个例子,jQuery(document).ready(function() {jQuery('#some-selector').on('hover', function() {jQuery(this).fadeOut('slow').delay(400).fadeIn();console.log(jQuery(this).text());});jQuery('#another-element').on('hover', function() {jQuery(this...

最全的jQuery选择器总结

1. #id : 根据给定的ID匹配一个元素<p id="myId">这是第一个p标签</p> <p id="not">这是第二个p标签</p> <script type="text/javascript"> $(function(){$("#myId").css("color","red");}); </script>结果：这是第一个p标签这是第二个p标签2. element : 根据给定的元素标签名匹配所有元素<p>这是p标签1</p> <p>这是p标签2</p> <p>这是p标签</p> <script type="text/javascript">$(function(){$("p").css("color","red");}); </scri...

jQuery的内容过滤选择器学习教程【图】

内容过滤器的过滤规则主要是包含的子元素或文本内容上。$(div:contains("xxx")).css(background, #ccc); //选择元素文本节点含有xxx 文本的元素 $(div:empty).css(background, #ccc); //选择空元素 $(ul:has(.red)).css(background, #ccc); //选择子元素含有class 是red 的元素 $(:parent).css(background, #ccc); //选择非空元素 jQuery 提供了一个has()方法来提高:has 过滤器的性能： $(ul).has(.red).css(background, #ccc); /...

在微信小程序中如何使用switch开关选择器【图】

这篇文章主要为大家详细介绍了微信小程序switch开关选择器的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下本文为大家分享了微信小程序switch开关选择器使用方法，供大家参考，具体内容如下效果图WXML<view class="tui-list-box"><view class="tui-menu-list"><text>状态：{{isChecked1}}</text><switch class="tui-fr" checked="{{isChecked1}}" bindchange="changeSwitch1"/></view><view class="tui-menu-list"><text...

JQuery的常用选择器、过滤器、方法全面介绍

1、jQuery对象转换成DOM对象 a.var $cr = $("#cr"); //jQuery对象 var cr=$cr[0]; //DOM对象 alert(cr.checked); //检测checkbox是否被选中了 b.var $cr=$("#cr"); //jQuery对象 var cr=$cr.get(0); //DOM对象 alert(cr.checked); //检测checkbox是否被选中了 2.DOM对象转换成jQuery对象 var cr=document.getElementById("cr"); //DOM对象 var $cr=$(cr); //jQuery对象注:平时用到的jQuery对象都是通过$()函数造出来的，$()函数就...

详解jquery中的属性过滤选择器

本篇文章主要是对jquery选择器之属性过滤选择器进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助代码如下:<style type="text/css">/*高亮显示*/.highlight{ background-color : gray}</style>代码如下:<body><p><p>Hello</p></p><p id="test">ID为test的p</p><input type="checkbox" id="s1" name="football" value="足球" />足球<input type="checkbox" name="volleyball" value="排球" />排球<input type="checkbox"...

浅谈jQuery 选择器和dom操作

浅谈jQuery 选择器和dom操作 JQuery选择器 1.基本选择器基本选择器是JQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class 和标签名来查找DOM元素。这个非常重要，下面的内容都是以此为基础，逐级提高的。 1).“$(“#id”)”，获取id指定的元素，id是全局唯一的，所以它只有一个成员。 2).“$(“.class”)”，获取class指定的元素，不同的元素可以具有相同的class属性，所以它可能具有多个成员。 3).“$(“element”...

JQuery 选择器 xpath 语法应用

比如下面html代码代码如下:<ul> <li class="aaaa" title="ttt">li-1</li> <li class="bbbb">li-2</li> <li title="fffff">li-2</li> </ul> <div class="aaaa" title="ttt">li-1</div> <div class="bbbb">li-2</div> <div title="fffff">li-2</div> 第一种根据属性选择E[@attr] $("[@title]").click().......... 即选择所有元素内属性带有title的元素即 <li class="aaaa" title="ttt">li-1</li> <li title="fffff">li-2</li> <...

老生常谈jquery id选择器和class选择器的区别

实例如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link href="style.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css"/><script type="text/javascript" src="jquery-2.1.4.js"></script><script type="text/javascript" src="dams.js"></script> </head> <body><div class="box">hello</div><div class="box">world</div> </body> </html>...

对jQuery选择器element用法介绍

定义和用法element 选择器选取带有指定标签名的元素。标签名引用 HTML 标签的 < 与 > 之间的文本。语法$(tagname)参数描述tagname 必需。规定要选取的元素的名称。在IE和Firefox下，动态创建元素的方法是由区别的如下面代码，在IE下可以运行，在Firefox下会报错 var theform = document.forms[0]; theform.appendChild(document.createElement("<input type=hidden name=EVENTTARGET>")); 在 F...

javascript – jQuery委托选择器问题【代码】

我正在尝试将click事件委托给所有现在和未来div的所有第一个锚标签,并使用“panels”类.我做了类似的事情：$('#panel').delegate('.panels a:first', 'click', function(event) [...]但这不起作用.它只将事件绑定到一个,首先是“.panels”.任何提示？解决方法:我不认为你只能使用选择器来做到这一点,除非碰巧a元素不仅仅是第一个锚点,而是“panel”div中的任何类型的第一个子元素(在这种情况下你可以使用： -儿童). 您可能必须在处...

举例讲解jQuery中可见性过滤选择器的使用【图】

可见性过滤器可见性过滤器根据元素的可见性和不可见性来选择相应的元素。过滤器名jQuery 语法说明返回:hidden $(:hidden) 选取所有不可见元素集合元素:visible $(:visible) 选取所有可见元素集合元素$(p:hidden).size(); //元素p 隐藏的元素 $(p:visible).size(); //元素p 显示的元素注意：:hidden 过滤器一般是包含的内容为：CSS 样式为display:none、input 表单类型为type="hidden"和visibility:hidden 的元素。示例 jQuery...

怎样使用jQuery内类名选择器【图】

这次给大家带来怎样使用jQuery内类名选择器，使用jQuery内类名选择器的注意事项有哪些，下面就是实战案例，一起来看一下。一、介绍类名选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素。在一个页面中，一个元素可以有多个CSS类，一个CSS类又可以匹配多个元素，如果有元素中有一个匹配的类的名称就可以被类名选择器选取到。类名选择器很好理解，在大学的时候大部分人一定都选过课，可以把CSS类名理解为课程名称，元素理解成学生...

jQuer选择器通配符及选择器实例用法总结

jquery选择器中的通配符经常用到，通配符在控制input标签时相当好用，大致的用法总结如下：1.选择器(1)通配符：$("input[id^=code]");//id属性以code开始的所有input标签 $("input[id$=code]");//id属性以code结束的所有input标签 $("input[id*=code]");//id属性包含code的所有input标签 $("input[name^=code]");//name属性以code开始的所有input标签 $("input[name$=code]");//name属性以code结束的所有input标签 $("input[name*...

首页 / JAVASCRIPT / JavaScript用例之省市联动选择器

JavaScript用例之省市联动选择器

内容导读

内容图文

————’ + ‘’+prodata[i].area_name+’’ + ‘————’ + ‘

内容总结

内容备注

内容手机端

【JavaScript用例之省市联动选择器】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程

————’ +
‘’+prodata[i].area_name+’’ +
‘————’ +
‘