如果可以填充,则链接选择仅显示第二个框

时间:2014-01-29 11:52:42

标签: javascript jquery

我有一个链式选择,它可以正常工作,但并非SELECT 1中的所有值都会产生SELECT 2中的值,所以我想隐藏SELECT 2,除非它有显示的内容。

我将这用于我的JS:

<script type="text/javascript">
    $(document).ready(function() {
        $(".select1").change(function() {
            var id=$(this).val();
            var dataString = 'id='+ id;
            $.ajax ({
                type: "POST",
                url: "ajax_load.php",
                data: dataString,
                cache: false,
                success: function(html) {
                    $(".select2").html(html);
                } 
            });
        });
    });
</script>

然后我将我的第二个选择设置为显示:无这样我怎样才能使第二个选择出现并消失,具体取决于方框1中的值?

由于

2 个答案:

答案 0 :(得分:1)

/ **每当选择1隐藏时发生变化选择2.如果它有值,则显示选择2只有** /

 $(document).ready(function() {
            $(".select1").change(function() {
                var id=$(this).val();
                var dataString = 'id='+ id;
                $.ajax ({
                    type: "POST",
                    url: "ajax_load.php",
                    data: dataString,
                    cache: false,
                    success: function(html) {
                        $(".select2").show();
                        $(".select2").html(html);
                    },
                    error : function() { $(".select2").hide();  }
                });
                var select2Length = $('.select2> option').length;
                if(select2Length > 0)
                  $(".select2").hide();
                else
                  $(".select2").show()
            });
        });

答案 1 :(得分:1)

试试这个:

<script type="text/javascript">
    $(document).ready(function () {
        $(".select2").hide();
        $(".select1").change(function () {
            var id = $(this).val();
            var dataString = 'id=' + id;
            $.ajax({
                type: "POST",
                url: "ajax_load.php",
                data: dataString,
                cache: false,
                beforeSend: function () {
                    $(".select2").hide();
                }
                success: function (html) {
                    $(".select2").show();
                    $(".select2").html(html);
                   var length = $('.select2 > option').length;
                   if(length>0){
                       $(".select2").show();
                   }else{
                       $(".select2").hide();
                   } 
                }
            });
        });
    });
</script>