qq_15290009
热呛
2016-01-07 07:19
采纳率: 100%
浏览 2.0k

如何去实现二级联动 第三级变成文本框并且能输入值

图片说明

如图片一样 怎么实现币种存期二级联动 而当存期变动后 年利率可以的文本框可以出现值呢 用jQuery 感谢大神们 说的详细一点呗

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

8条回答 默认 最新

  • rui888
    兔子托尼啊 2016-01-07 08:11
    已采纳

    不知道你具体存期 数据哪里来的。

     <!DOCTYPE html>
    <html>
    <head>
    <script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js">
    </script>
    <script>
    $(document).ready(function(){
    var o=[{'id':'1','val':'1'},{'id':'2','val':'2'},{'id':'3','val':'3'}];
    var o1=[{'id':'1','val':'子1'},{'id':'2','val':'子2'},{'id':'3','val':'子3'}];
      var tmp='';
      for(var i=0;i<o.length;i++){
       tmp+= "<option value='"+o[i].id +"'>"+o[i].val+"</option>"
     }
     $("#sel1").append(tmp);
    
         $("#sel1").change(function(){  
    $('#test').val(''); 
        $("#sel2").empty(); 
    $("#sel2").append('<option>----请选择----</option>');
    
          for(var i=0;i<o1.length;i++){
            if($("#sel1").val()==o1[i].id){
                $("#sel2").append("<option value='"+o1[i].id +"'>"+o1[i].val+"</option>");
    
         }
        }
    })   
    
     $("#sel2").change(function(){$('#test').val( $("#sel2").find("option:selected").text());  });
    
    
    
    });
    </script>
    </head>
    <body>
     币种<select id="sel1"> 
    
           <option>----请选择----</option> 
    
       </select> 
     年利率<select id="sel2"> 
    
           <option>----请选择----</option> 
    
    
    
       </select> 
    存期<input type='text' id="test"/>
    
    </body>
    </html>
    
    点赞 评论
  • qq_19558705
    ITDragon龙 2016-01-07 07:28

    是这样么?图片说明
    只贴出核心代码:

    <div class="form-group" id="alg1" style="display:none">
    <div class="form-group" id="alg2" style="display:none">
    <script type="text/javascript">
            $(".select_gallery").select2();
            $("#alg").change(function(){
                var algValue = $(this).val();
                for(var i=1; i<3;i++){
                    var algid = "alg"+i;
                    if (algValue == algid) {
                        $("#hr_line").css("display","block");
                        $("#"+algid).slideDown(200).css("display","block");
                    } else {
                        $("#"+algid).css("display","none");
                    }
                } 
                if (algValue == 0){
                    $("#hr_line").css("display","none");
                }
            });
        </script>
    
    

    对于出现值也是一样的原理,选中以后$().text(值);灵活处理

    点赞 评论
  • sinat_31535993
    sinat_31535993 2016-01-07 07:33

    简单的二级联动效果,随便找个代码详解的,看懂了,你就会写了!

    点赞 评论
  • rui888
    兔子托尼啊 2016-01-07 07:37
    点赞 评论
  • Royal_lr
    Royal_lr 2016-01-07 08:32

    你说的还是二级联动,,给存期一个change事件,,存期改变时就让年利率变为文本框输入就行了

    点赞 评论
  • showbo

    http://ask.csdn.net/questions/230597

    之前不是给过你了。。只是将动态页改为你的jsp页面而已。。

    点赞 评论
  • jhfsdfs
    machineShunMing 2016-01-07 15:48

    根据change事件获取第一个select的值,作为参数,请求第二个select的option,然后第二个如是

    点赞 评论
  • rui888
    兔子托尼啊 2016-01-08 03:06
    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js">
    </script>
    <script>
    $(document).ready(function(){
    var o=[{'id':'1','val':'人民币'},{'id':'2','val':'日元'}];
    var o1=[ {'id':'1',val:   [ {'id':'1','val':'一天通知'},{'id':'2','val':'七天通知'},{'id':'3','val':'一个月'},{'id':'4','val':'三个月'}]},{'id':'2',val:[    {'id':'3','val':'一个月'},{'id':'4','val':'三个月'}]}];
      var tmp='';
      for(var i=0;i<o.length;i++){
       tmp+= "<option value='"+o[i].id +"'>"+o[i].val+"</option>"
     }
     $("#sel1").append(tmp);
    
    tmp='';
    
    
     for(var i=0;i<o1.length;i++){
       tmp+= "<option value='"+o1[i].id +"'>"+o1[i].val+"</option>"
     }
     $("#sel2").append(tmp);
    
    
    $("#sel1").change(function(){
    $('#test').val('');
     $("#sel2").empty();
       tmp='<option>----请选择----</option> ';
    
    
     for(var i=0;i<o1.length;i++){
       if(o1[i].id==$("#sel1").val()){
    
          for(var j=0;j<o1[i].val.length;j++){
                tmp+= "<option value='"+o1[i].val[j].id +"'>"+o1[i].val[j].val+"</option>"
             }
    
        }
     }
     $("#sel2").append(tmp);
    
    
    });
    
    
     $("#sel2").change(function(){
    if($("#sel2").val()=='1'){
    $('#test').val('0.3');
    }else if($("#sel2").val()=='2'){
    $('#test').val('0.3');
    }else if($("#sel2").val()=='3'){
    $('#test').val('0.5');
    }else if($("#sel2").val()=='4'){
    $('#test').val('0.7');
    }else{
    $('#test').val('');
    }
    
    });
    
    
    });
    </script>
    </head>
    <body>
     币种<select id="sel1"> 
    
           <option>----请选择----</option> 
    
       </select> 
     年利率<select id="sel2"> 
    
           <option>----请选择----</option> 
    
    
    
       </select> 
    存期<input type='text' id="test"/>
    
    </body>
    </html>**** 
    
    点赞 评论

相关推荐