JQuery - 在列表中更改显示/隐藏具有 ID 匹配选项值的元素
[英]JQuery - On list change show/hide element with ID matching option value
问题描述
我有一个包含动态创建的表的页面。 这些表的 ID 存储在 DB 中，可以匹配页面上 select 列表的值。
默认情况下，所有表都是隐藏的。
我想根据选定的选项值显示和隐藏表格。 显示与所选选项值匹配的 ID 表，并隐藏其他不匹配的表。
下面的代码用于显示匹配表。 但是，如果与所选选项不匹配，如何隐藏表格？
$('#unit_table').hide();
$('#program_levels').change(function(){
if($("#" + this.value + "_table").is(":hidden")){
$("#" + this.value + "_table").show();
} else {
}
});
3 个解决方案
解决方案1
4 已采纳 2019-10-25 04:43:29
您可以使用带有属性选择器的结尾来隐藏所有 id 以_table结尾的不匹配表，请参见下面的代码
$('#unit_table').hide();
$('#program_levels').change(function(){
//hide all tables
$("table[id$='_table'").hide();
//show all matching tables only
//if($("#" + this.value + "_table").is(":hidden")){ // if condition not required
$("#" + this.value + "_table").show();
//}
});
解决方案2
1 2019-10-25 04:46:37
你也可以试试这个。
$(document).ready(function(){ $(".jsTable tr").hide(); $(".jsSelect").change(function(){ var oVal = $(this).val(); $(".jsTable tr").hide(); if(oVal.="") { $(".jsTable tr[id="+oVal+"]");show(); } }) })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <body> <h2>Show hide</h2> <select class="jsSelect"> <option value="">Select</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> </select> <br/> <table class="jsTable"> <tr id="A"> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr id="B"> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr id="C"> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr id="D"> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> </table> </body> </html>
解决方案3
0 2019-10-25 04:44:31
if ($("#someid").attr("sometable") === "something") {
// code
}
解决方案4
0 2019-10-25 04:54:19
此处表格隐藏和显示示例
$(document).ready(function(){ $(".jsTable").hide(); $(".jsSelect").change(function(){ var oVal = $(this).val(); $(".jsTable").hide(); if(oVal.="") { $(".jsTable[id="+oVal+"]");show(); } }) })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <body> <h2>Show hide</h2> <select class="jsSelect"> <option value="">Select</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> </select> <br/> <table class="jsTable" id="A"> <tr id="A"> <td>A Table</td> <td>Maria Anders</td> <td>Germany</td> </tr> </table> <table class="jsTable" id="B"> <tr id="B"> <td>B Table</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> </table> <table class="jsTable" id="C"> <tr id="C"> <td>C Table</td> <td>Roland Mendel</td> <td>Austria</td> </tr> </table> <table class="jsTable" id="D"> <tr id="D"> <td>D Table</td> <td>Helen Bennett</td> <td>UK</td> </tr> </table> </body> </html>
如果选择了匹配值，则隐藏选项元素
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.