1

我有一个表，每个表有 3 行和 3 个选择框。在更改时，我想隐藏选择框，插入一个 250 毫秒的小加载器图像，然后显示带有所选选项的选择框。前任。如果我在第 1 行中选择“已完成”，则仅在第 1 行中隐藏选择，插入加载器图像，然后将“已完成”的选择框显示为已选择（添加属性 selected="selected 到选项"）。这是我的演示： 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>

查询：

    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();
   });
})
4

2 回答 2

0

如果我正确理解您的问题，那是因为您.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/

于 2013-01-15T14:04:44.507 回答
0

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

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();
}
于 2013-01-15T14:12:45.313 回答