无法从位于隐藏行单元格中的选择元素中获取 selectedIndex

Question

我正在使用 DataTable，我正在尝试使用一些过滤功能来处理位于表格单元格中的选择元素。

过滤通过在位于每列下方的输入字段中输入文本来工作。然后过滤器功能检查该列的所有单元格中的选定文本，如果在一个单元格中没有找到匹配项，则隐藏相关行。

加载表格后，它会过滤表格一次。问题是在清除过滤器时，它不起作用。原因似乎与我将 selectedIndex 用于位于暂时不可见的行中的选择 DOM 对象有关。

“qu_owner_xxx”是选择元素的ID。

var el1 = document.getElementById("qu_owner_4");     //Visible, works like a charm
console.log("ID 1 " + el1.id);                       //ID is printed
console.log("EL 1 " + el1.selectedIndex);                           
var el2 = document.getElementById("qu_owner_17");    //Hidden, returns null
console.log("ID 2 " + el2.id);                       //Not reaching here
console.log("EL 2 " + el2.selectedIndex) ;           //Not reaching here
str = el.options[el.selectedIndex].text;             //Just for showing how to get the string used for filtering later 

问题是单元格的数据作为纯html传递给过滤器函数，而不是作为对象。我可以从执行 $(aData[i2]).attr('id') 的那部分获取 id，其中 aData 是表格行。但是使用 jQuery 与使用实际的 DOM 对象（例如 selectedIndex）相比，您似乎无法获得一些信息，尤其是当您必须从 html 中“重新创建”对象时。

如何从隐藏选择框/行的选定值中获取文本？有可能吗？

---

更新

我在jsfiddle 中测试了我的理论，但它实际上可以从隐藏的行/选择中检索信息。但毫无疑问，在我的过滤器功能中，未显示的行是失败的。

我的过滤函数（DataTable在过滤的时候调用这个函数）

$.fn.dataTableExt.afnFiltering.push(
                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 i2 = $("tfoot input").index($(this));                           

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

                       var str = "";
                       if(i2 == 5){//This is just during development, don't want to care about other columns with select element so just doing things on this column

                            //Here I just pick two id, one that I know is visible and one that is not
                           var el1 = document.getElementById("qu_owner_4");     //Visible, works like a charm
                           console.log("ID 1 " + el1.id);                       //ID is printed
                           console.log("EL 1 " + el1.selectedIndex);            //selectedIndex is printed            
                           var el2 = document.getElementById("qu_owner_17");    //Hidden, returns null
                           console.log("ID 2 " + el2.id);                       //Not reaching here
                           console.log("EL 2 " + el2.selectedIndex) ;           //Not reaching here

                           //This is how I intended to get it working, but fail
                           var el = document.getElementById($(aData[i2]).attr('id'));                                                      
                           str = el.options[el.selectedIndex].text; //String to be used for comparing

                       }

                       /*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;                        
                }
            );

aData = 行。 aData[x] 给了我该行单元格 x 的单元格内容。对于选择元素，它是原始 html。

this = 我输入搜索字符串的输入字段。

Answer 1

当然，您可以从所选值中获取文本！
这是一种方法（可能不是最好的，但很有效）：

    $('select').change(function() {
       var selectedValue = jQuery(this).val();
       var selectedText = '';

       jQuery(this).children('option').each(function() {
          if (jQuery(this).val() == selectedValue) {
             selectedText = jQuery(this).text();
          }
       });
    });

selectedText 变量将包含来自所选值的文本。

见here。