Question

我编写了这段代码，当用户更改了select元素时，我通过AJAX加载了一些数据。如果用户尚未更改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>

Answer 1

所有浏览器都不存在更改事件，请查看：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();

如果没有触摸选择，则显示一些内容

1 个答案: