Question

我有2个具有类启动时间和结束时间的选择框，如果选择了startime，则将禁用在开始时间之前的结束时间值。目前所有类名都相同如果我改变一个起始时间它影响所有结束时间，那么我是否可以阻止更改其他表行的结束时间？

的JavaScript

$("select[class='starttime']").on("change", function(){
    $("select[class='endtime']").empty();
    var startix = $("select[class='starttime'] option:selected").index();
    $("select[class='starttime'] option").each(function(ix, el){
        if (ix >= startix) {
            $(this).clone().appendTo("select[class='endtime']");
        }
    });
});

JSFiddle：http://jsfiddle.net/rt194bxd/

更新1

如果由于没有正确的标识符而无法实现，那么将ID设置为TR（表格行）确实有帮助吗？

我在这个JSFiddle http://jsfiddle.net/rt194bxd/1/

中为每个TR设置了id

Answer 1

不是做.appendTo("select[class='endtime']");，而是追加特定的选择元素;即，点击后的选择元素。

我们必须遍历DOM并找到它。

 $("select[class='starttime']").on("change", function () {
     var $this = $(this);     
     var nextSelect = $this.parent().next().children().first();         
     nextSelect.empty();
     var startix = $("select[class='starttime'] option:selected").index();
     $("select[class='starttime'] option").each(function (ix, el) {
         if (ix >= startix) {
             $(this).clone().appendTo(nextSelect);
         }
     });
 });

<强>更新

上面的代码有点儿麻烦。正确的方法如下所示：

 $("select[class='starttime']").on("change", function () {
     var $this = $(this);     
     var nextSelect = $this.parent().next().children().first();
     console.log(nextSelect[0].tagName);
     //$("select[class='endtime']").empty();
     nextSelect.empty();
     var startix = $("option:selected", $this).index();
     $("option", $this).each(function (ix, el) {
         if (ix >= startix) {
             $(this).clone().appendTo(nextSelect);
         }
     });
 });

小提琴：http://jsfiddle.net/rt194bxd/4/

Answer 2

$("select.starttime").on("change", function(){
    // Access "<tr />" elem.
    // This can be resolved better (this assumes there will be exactly 
    // one select.starttime per row. I'd recommend giving [unique] ID to
    // each row (or select.endtime) and passing it to select.starttime
    // (in extra attribute perhaps).
    var parent = $('tr')[$("select.starttime").index(this)];
    var $this = $(this);
    // Clear select.endtime of same table row
    $("select.endtime", parent).empty();
    // Get selected option index of this <select />
    var startix = $("option:selected", $this).index();

    // Run through this <select /> options
    $("option", $this).each(function(ix, el){
        if (ix >= startix) {
            $("select.endtime", parent).append($(this).clone());
        }
    });
});

选择Box on change to effect in the table table row

2 个答案: