Question

你好，Stackoverflow的人，我想在javascript中为某种表实现一个过滤器。我的文本搜索确实按预期工作，但我在使用js ...

获取“select”元素时遇到了一些问题

一些代码：

    function doSomething(){
    	var table, tr, td, i;
    	
    	table = document.getElementById("myTable");
    	tr = table.getElementsByTagName("tr");
    	for(i = 0; i < tr.length-1; i++){
    		td = tr[i].getElementsByTagName("td")[2];
    		
    		var e = td.getElementById("ABC");
    		
    		if(document.getElementById("cb1").checked &&  e.options[0].value == 0){
    			tr[i].style.display = "none";
    			
    		}else{
    			tr[i].style.display = "";
    		}
    	}
    }

<label>click me <INPUT type="checkbox" id="cb1" onclick="doSomething();"></label>
    
    <table id="myTable">
    
    <tr><td>Something</td><td>Some other Thing</td><td><select id="ABC"  name="sel1">
    <option value=0>Default</option>
    <option value=1>Not Default</option>
    </select></td></tr>
    
    </table>

https://jsfiddle.net/tnufmuLu/3/

Answer 1

我更新了你的小提琴并创建了一个新的DEMO

我已经纠正了代码中的一些错误：

for(i = 0; i < tr.length; i++){

和

var e = document.getElementById("ABC");

此外，我已将JavaScript代码置于<script>代码中的HTML代码顶部，因为它提供了undefined function错误。

Answer 2

您可以像这样更新您的代码

function doSomething(){
    var table, tr, td, i;

    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    console.log(tr);
    for(i = 0; i < tr.length; i++){
        td = tr[i].getElementsByTagName("td")[2];
        var e = td.getElementsByTagName("select")[0];
        alert('selected value is:' + e.options[e.selectedIndex].value);
        if(document.getElementById("cb1").checked &&  e.options[0].value == 0){
            tr[i].style.display = "none";

        }else{
            tr[i].style.display = "";
        }
    }
}

此处已更新demo 如果要获取下拉列表的选定值，可以使用其 selectedIndex 属性。

顺便说一句，我们不应该定义具有相同ID的多个HTML元素（请检查here）

获取选择内部表行的选定值不按预期工作

2 个答案: