Question

我有一张桌子，每张桌子上有3行和3个选择框。在更改时，我想隐藏选择框，插入一个小的加载器图像250毫秒，然后显示带有所选选项的选择框。防爆。如果我在第1行中选择“已完成”，则仅在第1行中隐藏选择，插入加载程序图像，然后显示选中“已完成”的选择框（添加属性选择=“选择选项”）。这是我的演示：http://jsfiddle.net/5ueYw/1/到目前为止我得到了什么。谁可以提供一些提示？感谢

HTML：

<table id="inbTB">
<thead>
    <tr class="head">
        <th class="sortH alignCenter smSelN header">#</th>
        <th class="sortH alignLeft header headerWidth " nowrap="nowrap">Name</th>
        <th class="sortH alignLeft header smSelR"><tag:lang.stats />Status</th>
    </tr>
</thead>
<tbody>
<tr class="sortRow">
        <td class="alignCenter">#1</td>
        <td class="alignLeft upCase">One</td>
        <td class="alignCenter">
            <select class="stSel smSelR smSelRInput">
                <option value="0">New</option>
                <option value="1">Completed</option>
                <option value="2">Canceled</option>
            </select>
            <div class="loader"></div>
        </td>
    </tr>
 <tr class="sortRow">
        <td class="alignCenter">#2</td>
        <td class="alignLeft upCase">Two</td>
        <td class="alignCenter">
            <select class="stSel smSelR smSelRInput">
                <option value="0">New</option>
                <option value="1">Completed</option>
                <option value="2">Canceled</option>
            </select>
            <div class="loader"></div>
        </td>
    </tr>
 <tr class="sortRow">
        <td class="alignCenter">#3</td>
        <td class="alignLeft upCase">Three</td>
        <td class="alignCenter">
            <select class="stSel smSelR smSelRInput">
                <option value="0">New</option>
                <option value="1">Completed</option>
                <option value="2">Canceled</option>
            </select>
            <div class="loader"></div>
        </td>
    </tr>

JQUERY：

    var gif = $('.alignCenter .loader');
    $('.stSel').change(function(){
     $('select').hide();
   gif.html('<img alt="" src="" />').show().delay(250).fadeOut(function(){  // src    image is a loader gif
     $('.stSel option selected').show();
   });
})

Answer 1

如果我正确理解您的问题，那是因为您使用.select隐藏并显示选择。您需要使用this来引用已触发更改事件的那个...

var gif = $('.alignCenter .loader');
$('.stSel').change(function() {
    var $this = $(this);
    $this.hide();
    gif.html('<img alt="" src="" />')
        .show()
        .delay(250)
        .fadeOut(function(){  // src image is a loader gif
            $this.show();
        }
    );
})

jsFiddle示例...... http://jsfiddle.net/5ueYw/3/

Answer 2

这是一个开始，有些领域我相信你可以改进：

http://jsfiddle.net/5ueYw/6/

HTML

<table id="inbTB">
    <thead>
        <tr class="head">
            <th class="sortH alignCenter smSelN header">#</th>
            <th class="sortH alignLeft header headerWidth " nowrap="nowrap">Name</th>
            <th class="sortH alignLeft header smSelR"><tag:lang.stats />Status</th>
        </tr>
    </thead>
    <tbody>
    <tr class="sortRow">
            <td class="alignCenter">#1</td>
            <td class="alignLeft upCase">One</td>
            <td class="alignCenter">
                <select class="stSel smSelR smSelRInput">
                    <option value="0">New</option>
                    <option value="1">Completed</option>
                    <option value="2">Canceled</option>
                </select>
                <div class="loader" style="display:none;">loading...</div>
            </td>
        </tr>
     <tr class="sortRow">
            <td class="alignCenter">#2</td>
            <td class="alignLeft upCase">Two</td>
            <td class="alignCenter">
                <select class="stSel smSelR smSelRInput">
                    <option value="0">New</option>
                    <option value="1">Completed</option>
                    <option value="2">Canceled</option>
                </select>
                <div class="loader" style="display:none;">loading...</div>
            </td>
        </tr>
     <tr class="sortRow">
            <td class="alignCenter">#3</td>
            <td class="alignLeft upCase">Three</td>
            <td class="alignCenter">
                <select class="stSel smSelR smSelRInput">
                    <option value="0">New</option>
                    <option value="1">Completed</option>
                    <option value="2">Canceled</option>
                </select>
                <div class="loader" style="display:none;">loading...</div>
            </td>
        </tr>
  </tbody>
</table>

JS

$('.stSel').change(function(){
  myselect = $(this); 
  myloader = $(this).parent().children('.loader');

    // Make sure we override animations that are already running, there is probably a
  // better way to do this.  
  $('.stSel').show();
  $('.loader').hide();  

  myselect.hide();
  myloader.show();

  setTimeout(function() {
    showme( myselect, myloader );
  }, 2000)  
});

function showme(el, loader){
  el.show();
  loader.hide();
}

隐藏已更改选择

2 个答案: