css - bootstrap做下拉菜单省市二级联动

问题描述

问 题

用bootstrap做了下拉菜单,但是点击下边的选项,上边的按钮无法改变,依然还是显示"---省份---"。
我的想法是 点击下拉菜单里 比如北京市 然后上边的按钮内容就显示成北京市,同时右边的下拉菜单里,只显示北京市的区域,然后我点击右边下拉菜单,下边显示出来的全是北京的区...但是...一直实现不了。
用jquery把点击的li的文字 赋给 上边按钮的text 结果改不掉,还是一直显示"---省份---"。
有没有老哥来帮帮忙 就显示个二级联动就行
如图 无论点哪个省 上边按钮永远显示"---省份---"

<form  class="form-inline zForm_expert" role="form">
     <span>省份：</span>
     <div class="btn-group zBtn-group">
         <button type="button" class="btn btn-default dropdown-toggle zButton_province" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">---省份---</button>
         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="caret"></span>
         </button>
         <ul class="dropdown-menu zSelect_info zSelect_province">
              <li><a href="javascript:;">北京市</a></li>
              <li class="active"><a href="javascript:;">河南省</a></li>
         </ul>
     </div>
     <span>城市：</span>
     <div class="btn-group zBtn-group">
           <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">---城市---</button>
           <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
           </button>
           <ul class="dropdown-menu zSelect_info zSelect_city">
                <li class="active"><a href="javascript:;">郑州市</a></li>
                <li><a href="javascript:;">开封市</a></li>
           </ul>
      </div>
</form>

这个问题已被关闭，原因：问题已解决 - 问题已解决，且对他人无借鉴意义

解决方案

这里应该用<select>标签呀。
http://v3.bootcss.com/css/#下拉列表（select）

按照你描述的应该也可以改掉，但是你的JS代码没有贴出来没法看呀。

这篇关于css - bootstrap做下拉菜单省市二级联动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！