1

我有一个表，其中几列包含选择元素。在 tfoot 中，每一行都有一个输入元素，用于根据选择元素中的选定值过滤行。

当加载表格并使用选择直接过滤列时，它可以工作并且表格被过滤。

但是在选择元素中进行更改时，过滤器函数不会注意到值已更改。

检查 html 我可以看到“selected”属性仍然在加载时选择的选项上。因此，在进行实际更改时（在 FF 和 Chrome 中均已识别），它不会得到更新。

但在 jQuery 中，搜索选定的值 ( .find(":selected")) 有效。所以我认为我可以使用它来查找值，然后将 selected 属性设置为所选的任何内容。这就是我尝试这样做的方式：

$("select[id^='qu_owner']").live('change', function (e) {
    var owner = $(this).val();
    console.log(owner);
    var ticketid = $(this).attr('id').substr(9);
    $($(this) + " option[value=" + owner + "]").attr("selected", "selected"); //Update: this has been removed
});

但是元素中的 selected 属性仍然没有更新。

任何线索如何做到这一点？我需要过滤才能工作，它正在查看选定的属性。不能对选择元素进行这种更新吗？

更新

好的，根据下面的评论和答案，我知道有更好的方法来做我上面所做的事情。所以不要使用 $(this).find(":selected").val(); 我现在使用 $(this).val();。另外，我确实删除了最后一行，因为我知道不应该尝试设置 selected 属性。

而且，我现在明白我遇到实际问题的代码是过滤器函数。这适用于 DataTables，因此它是一个插件，但这是重要的部分：

aData[i] 是实际的表格单元格。因此，它只是文本，但在这种情况下，它是我的选择元素的文本。我认为下面的方向是正确的，但仍然无法正常工作（查看 console.log-rows 旁边的评论）：

function( oSettings, aData, iDataIndex ) {

                var ret = true;    

                    //Loop through all input fields i tfoot that has class 'sl_filter' attached                                              
                   $('tfoot .sl_filter').each(function(i, obj){

                       //$(this) can be used. Get the index of this colum.
                       var i = $("tfoot input").index($(this));                           

                       //Create regexp to math
                       var r = new RegExp($(this).val(), "i");

                       //Get the selected option from the column
                        console.log($(aData[i]).attr('id')); //Properly prints the ID
                        console.log($(aData[i] + " option:selected").text()); //Prints all options, not only the selected on
                        console.log($(aData[i] + " option:selected").val()); //Prints the value of the id that was selected when data was loaded, even if a new option has been chosen
                        console.log($(aData[i]).val()); //Prints the value of the id that was selected when data was loaded, even if a new option has been chosen

                        var str = $(aData[i] + " option:selected").text();                          

                       /*Test to see if there is a match or if the input value is the default 
                         (the initial value of input before it has any fokus/text) */                           
                       if(r.test(str) || $(this).val()=="Search"){
                           //Return true only exits this function
                           return true;
                       }else{

                           /*Return false returns both function an .each. Retain 'false' in a variable scoped
                             to be reached outside the .each */                                
                           ret = false;
                           return false;
                       }
                   });
                   //Return true or false
                    return ret;                        
                }

这是我需要掌握的所选元素的文本。这就是应该过滤的内容。我怎样才能做到这一点？

更新

为了缩小范围，我创建了一个包含必要内容的 jsfiddle。这完全是关于如何从所选选项中提取文本：jsfiddle

aData[i] = 表格单元格。在 jsfiddle 中，我使用“sel”作为单元格内容的变量。sel 的文本从 aData[i] 复制而来。

4

1 回答 1

1

无需更改 - 的属性，<option>它应该包含从服务器下载的元素的原始状态。

您的过滤器应该检查所选选项的selected 属性，例如：

.filter(function() {
    return this.selected; // check the boolean property
})

这也是:selected伪选择器的工作方式——它检查属性的当前值，而不是属性。

请注意，在元素的change处理程序中，您可以只使用来获取当前选定的值。<select>this.value

$('select').on('change', function() {
    // current value
    var value = this.value;   

    // text of the currently selected option.
    var text = this.options[this.selectedIndex].text;
}
于 2012-05-29T09:18:02.590 回答