m0_37308237
峡山飞云
采纳率100%
2017-02-06 09:55 阅读 1.0k

javascript问题,急求各位大神,在线等,真的很着急! 新年好

100

具体说明如下,可能有些麻烦,希望能给代码写的详细些
步骤1.后台传一个省份的名称;
步骤2.下拉框如果选择这个省份;
步骤3.下面的市区下拉框可以选择对应的市区;
如果,步骤2选择的是别的省份,步骤3置灰不可选。

其实就是跟着步骤1的值作出相应选择,

图片说明

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

6条回答 默认 最新

  • 已采纳
    showbo GoCityPass新加坡曼谷通票 2017-02-06 11:45
     省:<select id="pro">
        <option value="">省份</option>
          <option value="北京">北京</option>
          <option value="上海">上海</option>
          <option value="广西">广西</option>
    </select>
    市:<select id="city"><option value="">市区</option></select>
    <script>
        var selectedPro = '广西';///这个js变量值改为你从服务器取到的
        //市区数组
        var arrCity = [];
        arrCity['北京'] = [{ t: '北京市' }];
        arrCity['上海'] = [{ t: '上海市' }];
        arrCity['广西'] = [{ t: '南宁市' }, { t: '桂林市' }, { t: '柳州市' }];
    
        document.getElementById('pro').onchange = function () {
            if (this.value == selectedPro) addOptions(document.getElementById('city'), arrCity[this.value]);
            else document.getElementById('city').selectedIndex = 0;
            document.getElementById('city').disabled = this.value != selectedPro;///和后台传来的值不一样禁用
        }
        function addOptions(s, arr) {
            if (!arr || arr.length == 0) arr = [{ t: '市区' }];
            if (!s) { alert('select对象不存在!'); return false }
            s.options.length = 1;
            for (var i = 0; i < arr.length; i++) s.options.add(new Option(arr[i].t, arr[i].t));
        }
    </script>
    
    点赞 9 评论 复制链接分享
  • huruiba 坎特 2017-02-06 13:12

    用值改变事件就可以解决了
    1.用户选择省份下拉框的时候,判断值是否等于后台值,然后操作就可以了
    2.主要就是做后台会传递的所有省份的数组,和对应的城市的二维数组;然后根据用户操作判断就可以了

    //html
     <select id="pro">
                <option>省份</option>
                <option>黑龙江</option>
                <option>北京</option>
            </select>
            <select id="city" disabled>
                <option>市区</option>
            </select>
            <input type="hidden" class="province" value="黑龙江">
    
    //js
    $(document).ready(function (){
                $("#pro").change(function(){
    
                    var province = $(".province").val();//后台值
                    var proNow = $("#pro").val();//用户选择的省份
                    var allProvince =["黑龙江","北京","..."];//后台可能传过来的省份
                    var index=-1;
                    var allCity = [[111,111,111],[222,222,222],[333,333,333]];//和省份数组的位置对应的城市
    
                    if (proNow == province) {//判断用户选择省份是否等于后台省份
                        for (var i=0; i<allProvince.length; i++) {//取得省份所在城市数组的下标
                            var pro = allProvince[i];
                            if(pro == province) {
                                index = i;
                                break;
                            }
                        }
                    }   
                    //添加城市与设置不可点击
                    if (index!=-1) {
                        console.log(222);
                        $("#city").html("");
                        for(var i=0;i<allCity[index].length;i++){
                            $("#city").append("<option>"+allCity[index][i]+"</option>");
                        }
                        $("#city").attr("disabled",false);
                    } else {
                        console.log(111);
                        $("#city").html("");
                        $("#city").append("<option>市区</option>");
                        $("#city").attr("disabled","disabled");
                    }
                });
            });
    
    
    
    点赞 1 评论 复制链接分享
  • appying872509 小贾童鞋 2017-02-06 14:31

    下拉框的级联操作

    dao层:
    public class ProDaoImpl implements IProDao {

    @Override
    public List<Province> queryPro() {
        Session session=HibernateUtil.getsSessionFactory().openSession();
        List<Province> prolist=session.createQuery("from Province").list();
        session.close();
        return prolist;
    }
    
    @Override
    public List<City> queryCityByPId(Integer pid) {
        Session session=HibernateUtil.getsSessionFactory().openSession();
        Query query=session.createQuery("from City where province.pid=?");
        query.setInteger(0, pid);
        List<City> citylist=query.list();
        session.close();
        return citylist;
    }
    

    }

    biz层:
    public class ProBizImpl implements IProBiz {

    ProDaoImpl dao=new ProDaoImpl();
    @Override
    public List<Province> queryPro() {
        // TODO Auto-generated method stub
        return dao.queryPro();
    }
    @Override
    public List<City> queryCityByPId(Integer pid) {
        // TODO Auto-generated method stub
        return dao.queryCityByPId(pid);
    }
    

    }

    action层:
    public class ProvinceAction extends ActionSupport {
    private List prolist;
    private List citylist;

    /**
     * citylist存的是从数据库中查询出来的结果,由于json中不能保存对象,
     * 所以将citylist中的值存到<Map<String,Object>键值对中,
     * 将map中的值用list嵌套起来,方便前台遍历
     * 
     * 
     * */
    private List<Map<String,Object>> cityMapList;
    
    
    
    ProBizImpl biz=new ProBizImpl();
    public String queryProvince(){
        prolist=biz.queryPro();
        return SUCCESS;
    }
    
    public String queryCityByPId(){
        cityMapList=new ArrayList<Map<String,Object>>();
        String pid=ServletActionContext.getRequest().getParameter("pid");//从页面取到省份id传入后台
        if(pid!=null){
            citylist=biz.queryCityByPId(Integer.parseInt(pid));
            for(City city:citylist){
                Map<String,Object> map=new HashMap<String,Object>();
                map.put("cid", city.getCid());
                map.put("cname", city.getCname());
                cityMapList.add(map);
            }
        }
    
    
        return SUCCESS;
    }
    
    struts:
    <struts>
    

    <!-- 返回json格式继承json-default -->

    /index.jsp



    <!-- 指定哪一个action属性进行转换 -->
    <!-- param是action的参数 root是json最高级 -->
    cityMapList


    jsp页面:
    <br> function queryCityByPId(){<br> var pid=$(&quot;#prosel&quot;).val();<br> $.ajax({<br> url:&quot;&lt;%=path%&gt;/queryCityByPIdAction&quot;, //访问路径<br><br> dataType:&quot;json&quot;, //数据传输类型<br><br> type:&quot;post&quot;, //请求方式<br><br> data:{&quot;pid&quot;:pid}, //请求的json data从页面上获取json值<br> success:function(data){ //回调函数 data接收的是action中的返回值<br> var jsonStrHtml;<br> for(var i=0;i<data.length;i++){<br> jsonStrHtml+="<option value='+dada[i].cid+'>&quot;+data[i].cname+&quot;</option>&quot;;<br><br> }<br> //拼接好的字符串存入下拉列表<br> $(&quot;#citysel&quot;).html(jsonStrHtml);</p> <p>}</p> <p>})</p> <p>}<br>



    --省份--

    ${pro.pname}

    /c:forEach


    --城市--


    点赞 1 评论 复制链接分享
  • jdjdndhj AProMonkey 2017-02-06 10:07

    这个实现起来很简单的,只要绑定两个组件就OK,这种效果叫级联操作:
    一个示例:
    <!DOCTYPE html>







    <br> .cascade { float: left; width: 120px; height: 30px; }<br> .cascade select { width: 100%; height: 100%; }<br>
    <div class="cascade">
        <select id="province" onchange="change();">
            <option>--请选择省份--</option>
        </select>
    </div>
    
    <div class="cascade">
        <select id="city">
            <option>--请选择市--</option>
        </select>
    </div>
    
    <script type="text/javascript">
        //首先建立一个你需要省,和它对应的市的数组,如下:
        var cityList = new Array();
        cityList['北京市'] = ['朝阳区', '东城区', '西城区', '海淀区', '宣武区', '丰台区', '怀柔', '延庆', '房山'];
        cityList['上海市'] = ['宝山区', '长宁区', '丰贤区', '虹口区', '黄浦区', '青浦区', '南汇区', '徐汇区', '卢湾区'];
    
    
    
        //然后写一个方法把这一大长串的数组给他调到你需要的地方去
        function change() {
            var pVal = document.getElementById("province").value; //获取省份列表中的值
            var c = document.getElementById("city"); //获取城市列表
            c.options.length = 0; //清楚当前城市列表中的值
            for (var i in cityList) { //循环遍历cityList的属性
                if (i == pVal) { //判断当i等于省份列表中的值时;
                    for (var j in cityList[i]) { //循环遍历cityList[i]的属性
                        c.add(new Option(cityList[i][j], cityList[i][j]), null)
                        //城市列表的末尾增加一个<option>选项,text:cityList[i][j],value:cityList[i][j]
                    }
                    break;
                }
            }
        }
    
        function allCity() {
            var p = document.getElementById("province"); //获取省份列表
            for (var i in cityList) { //循环遍历cityList的属性
                p.add(new Option(i, i), null);
                //省份列表的末尾增加一个<option>选项,text:i,value:i
            }
        }
        window.onload = allCity;
    
    </script>
    


    点赞 评论 复制链接分享
  • zzhao114 Z. ZHANG 2017-02-06 11:09

    通过你表述的 我在一本教材上的看过类似的 《javaweb从入门到精通》的308页 你可以从网上下个pdf的看看 不知道可以可以帮到你

    点赞 评论 复制链接分享
  • Leafage_M 繁城落叶 2017-02-06 13:50

    我之前也遇到过相同的问题,我通过写的一个js代码解决了,大致内容如下:

     <html>
    <body>
    <script src="jquery-3.1.1.js" type="text/javascript"></script>
    
    <form action="/example/html/form_action.asp" method="get">
    
        院系:<select id="yuanxi" onclick="a()">
                <option   value="0" > </option>
                <option  value="1">1</option>
                <option   value="2">2</option>
            </select>
        班级:<select name="level" id="banji">
            <option  class="1" value="C"> </option>
            <option  class="1" value="C">C</option>
            <option  class="2" value="C++">C++</option>
            <option  class="2" value="Python">Python</option>
        </select>
    </form>
    <script type="text/javascript">
    
        function  a () {
            var value = document.getElementById('yuanxi').options[document.getElementById('yuanxi').selectedIndex].text;//得到文本框中的内容
            var length = $("#banji > option").length;//得到班级下面的所有option个数
            for(var  i =1;i<length;i++) {
                var currentElem = $("#banji > option:eq("+i+")");
                if(currentElem.attr("class") != value) {//将所有与这个值不相等的信息隐藏
                    currentElem.css("display","none");
                } else {
                    currentElem.css("display","block");//相等的信息显示出来
                }
            }
        }
    </script>
    </body>
    </html>
    

    意思就是有两组数据,院系和班级(这个我是通过JSP,然后从后台传进来的数据),数据库中存放的关系就是一个院系下面有许多个班级。
    所以后台传过来的时候,将院系的值作为在第一个标签下的的value值,然后对应的value值,作为第二个(也就是班级)下面的的class。

    然后使用javascript代码(用到了jquery),根据所选择的第一个院系的value,然后遍历下面的班级中与之对应的class的值,如果不相同的就设置为不可见。

    我的思路就是这样的。

    点赞 评论 复制链接分享

相关推荐