Блог

Я написал этот код, в котором я загружаю некоторые данные через AJAX, когда пользователь изменил элемент select. Я хочу показать какой-то простой текст или данные, если пользователь еще не изменил элемент select. Как мне это сделать?

Я пробовал кучу вещей, таких как, например, проверка значения элемента select, соответствует ли значение некоторому шаблону и т. Д., Но ни один из них, похоже, не работает.

Любая помощь приветствуется!

     <script type="text/javascript" >
        jQuery(document).ready(function($) {
            //Spin.js options
            var opts = {
              lines: 7, // The number of lines to draw
              length: 6, // The length of each line
              width: 2, // The line thickness
              radius: 6, // The radius of the inner circle
              rotate: 0, // The rotation offset
              color: '#000', // #rgb or #rrggbb
              speed: 0.6, // Rounds per second
              trail: 32, // Afterglow percentage
              shadow: false, // Whether to render a shadow
              hwaccel: false, // Whether to use hardware acceleration
              className: 'rdc-load-spinner', // The CSS class to assign to the spinner
              zIndex: 2e9, // The z-index (defaults to 2000000000)
              top: '82px', // Top position relative to parent in px
              left: '120px' // Left position relative to parent in px
            };

            //Other variables
            $result = $("#rdc-result");
            $select = $("#rdc-show-user-coupons");

            //On change
            $select.change(function() {
                $result.hide();
                //Current value of the select element
                var companyID = $(this).val();

                if( companyID !== '' ) {
                    //AJAX Query variables
                    var data = {
                        'action': 'rdc_call',
                        'company_id': companyID
                    };

                    //AJAX Post
                    $.post(ajaxurl, data, function(response) {
                        //Variables
                        var target, spinner, table;

                        //Table begin
                        table  = '<table class="form-table fl-left"  style="width:50%;">';
                            table  = '<tbody>';

                            $.each(response, function(i, obj) {
                                if(i%2) {
                                    table  = '<tr><td style="font-weight: bold; width: 80px;">#'   obj.id   '</td><td style="width: 100px;">'   obj.user_login   '</td><td style="width: 100px;">'   obj.coupon   '</td><td>26.06.2014 - 10.10.2014</td></tr>';
                                } else {
                                    table  = '<tr class="odd"><td style="font-weight: bold; width: 80px;">#'   obj.id   '</td><td style="width: 100px;">'   obj.user_login   '</td><td style="width: 100px;">'   obj.coupon   '</td><td>26.06.2014 - 10.10.2014</td></tr>';
                                }
                            });

                            table  = '</tbody>';
                        table  = '</table>';

                        table  = '<div class="fl-right" style="width:50%;">';
                        table  = '<textarea style="margin: 10px; width: 97%; height: 300px;">';
                            $.each(response, function(k, text) {
                                table  =  text.user_login   ', '   text.coupon   'n';
                            });
                        table  = '</textarea>';
                        table  = '</div>'

                        //Spin.js init and data load
                        $(function() {
                            target = $('#rdc-loader').get(0);
                            spinner = new Spinner(opts);
                            spinner.spin(target);
                            setTimeout(function() {
                                spinner.stop();
                                $result.hide().html(table).fadeIn('slow');
                            }, 800);
                        });
                    }, "json");
                } else {
                    // No user
                    var table;
                    table  = 'Du skal vælge en virksomhed fra dropdown-menuen til højre.';

                    $result.hide().html(table).fadeIn('slow');;
                }
            });
        });
    </script>
  

Событие изменения отсутствует для всех браузеров, проверьте это: http://www.quirksmode.org/dom/events/change.html

Если вы нацелены на браузер, который не поддерживает этот тип события, используйте таймер или интервал

Вот пример: http://jsbin.com/zukori/1/edit

 var $select = $('#select');

var initialValue = $select.val();

var changed = false;

var check = function(){
  if (!changed){
     if (initialValue !== $select.val()){
       changed = true;
       $('#tip').hide();
     } else {
       setTimeout( check, 400);
     }

  }
};

check();