Question

我的表单中有两个选择框。当用户选择第一个选择框的选项时，第二个选择框的选项将由jquery ajax显示。我的问题是第一个选择框的某些选项在数据库中没有记录当他们选择第二个选择框时，不应显示。我需要检查数据是否为空。我对此代码进行了调查，但没有任何反应观点：

<script type='text/javascript'>
    $(document).ready(function(){
        $('#subsec').hide();
        $('section').change(){
            var sec_id=$(this).val();
            var url='article_controler/get_options/'+sec_id;

            $.ajax({
                url:url,
                type:'post',
                success:function(resp){
                    if(!resp)
                        $('#subsec').hide();
                    else 
                        $('#subsec').show();
                        $('$subsec').html(resp)

                })
            }
        });
</script>

Answer 1

你可以试试这个

 $.ajax({
                url:url,
                type:'post',
                success:function(resp){
                    if(resp == "" || resp == null){
                        $('#subsec').hide();
                    }
                    else {
                            $('#subsec').show();
                            $('#subsec').html(resp);
                        }

                })
            }
        });

Answer 2

嗨请试试这个，

 <script type='text/javascript'>
    $(document).ready(function(){
    $('#subsec').hide();
    $('#firstSelectBoxId').change("selectboxMethod");

    });

   function selectboxMethod(){
   var sec_id=$("#firstSelectBoxId").val();
   alert("Selected from first select"+sec_id);
   if(sec_id != null){
    var url='article_controler/get_options/'+sec_id;
     $.ajax({
         url:url,
         type:'post',
        success:function(resp){

            $('#subsec').show();
            $('#subsec').html(resp);
        }

      });
   }else{
      $("#subsec").hide();
    }

  }

  </script>

Answer 3

我添加了内联评论以帮助您

class Article_Controller extends CI_Controller
{
    public function get_options()
    {
        $option = $this->input->post('option'); // validate this

        //Get a list of Sub options from your model
        $model = ''; //your own implementation here

        //If no model data returned, send a 404 status header
        //and bail
        if(!$model){
            return $this->output->set_status_header(404);
        }

        $responce = array(
            'suboptions'  =>  $model // array of suboptions the model returned
        );

        // Ideally Abstract all the Ajax stuff to 
        // its own controller to keep things Dry
        return $this->output
            ->set_status_header(200)
            ->set_content_type('application/json')
            ->set_output(json_encode($responce));
    }
}

-

 //Global URL variable or put it in <base href>
    var URL = "<?php echo site_url();?>";

    (function($){
        var myForm = {
            init : function(){
                //initialize myForm object properties here
                this.Form = $("form#myFormID");
                this.selectChange = this.Form.find("select#mySelectBoxI");
                this.newSelect = this.Form.find("select#secondaryselectboxId");

                //hide second select with CSS by default

                //Bind the Change event to our object(myForm) method
                this.selectChange.on('change', $.proxy(this.ChangedEvent, this)); 
            },

            ChangedEvent : function(event){ // gets the change event

            //Grab the currentTarget(option[i]) value from the event received
            //You may also need to pass the CSRF Token
                this.buildAjaxRequest({'option' : event.currentTarget.value});
            },

            buildAjaxRequest : function( data ){
                var config = {
                    cache : false,
                    url : URL + 'article_controller/get_options',
                    method : 'POST',
                    data : data, //'option' : event.currentTarget.value
                    dataType : 'json'
                };

                this.makeAjaxRequest(config).then(
                    $.proxy(this.ResponceHandler, this),
                    $.proxy(this.ErrorHandler, this)
                );
            },

            makeAjaxRequest : function( config ){
                return $.ajax( config ).promise();
            },

            ResponceHandler : function( data ){
                $.each(data.suboptions, function(i, v){
                    this.newSelect.append('<option value="'.data[i].'">'.data[v].'</option>');');
                });
                this.newSelect.show();
            },

            ErrorHandler : function(xhr, statusText, exception){
                switch(xhr.status)
                {
                    case 404: //remember the 404 from the controller
                        alert(xhr.statusText); //handle your own way here
                    break;
                }
            },

        }

        myForm.init();
    }(jQuery));

在jquery的ajax方法中检查成功数据是否为空

3 个答案: