猿问

JQuery - 在列表中更改显示/隐藏 ID 匹配选项值的元素

我有一个包含动态创建的表的页面。这些表的 ID 存储在数据库中，可以匹配页面上选择列表的值。


默认情况下，所有表都是隐藏的。


我想根据选定的选项值显示和隐藏表格。显示与所选选项值匹配的 ID 表，并隐藏其他不匹配的表。


下面的代码用于显示匹配表。但是，如果与所选选项不匹配，我该如何隐藏表格？


$('#unit_table').hide();


$('#program_levels').change(function(){

            if($("#" + this.value + "_table").is(":hidden")){

                $("#" + this.value + "_table").show();

            } else {


            }

            });


潇潇雨雨
浏览 168回答 3
3回答

素胚勾勒不出你

您可以使用带有属性选择器的结尾来隐藏所有具有 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();    //}  });
0

缥缈止盈

你也可以试试这个。$(document).ready(function(){&nbsp; &nbsp;$(".jsTable tr").hide();&nbsp; &nbsp;$(".jsSelect").change(function(){&nbsp; &nbsp; &nbsp;var oVal = $(this).val();&nbsp; &nbsp; &nbsp; $(".jsTable tr").hide();&nbsp; &nbsp; &nbsp;if(oVal!="")&nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; $(".jsTable tr[id="+oVal+"]").show();&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp;})})<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">&nbsp; <option value="">Select</option>&nbsp; <option value="A">A</option>&nbsp; <option value="B">B</option>&nbsp; <option value="C">C</option>&nbsp; <option value="D">D</option></select><br/><table class="jsTable">&nbsp;&nbsp; <tr id="A">&nbsp; &nbsp; <td>Alfreds Futterkiste</td>&nbsp; &nbsp; <td>Maria Anders</td>&nbsp; &nbsp; <td>Germany</td>&nbsp; </tr>&nbsp;<tr id="B">&nbsp; &nbsp; <td>Centro comercial Moctezuma</td>&nbsp; &nbsp; <td>Francisco Chang</td>&nbsp; &nbsp; <td>Mexico</td>&nbsp; </tr>&nbsp;<tr id="C">&nbsp; &nbsp; <td>Ernst Handel</td>&nbsp; &nbsp; <td>Roland Mendel</td>&nbsp; &nbsp; <td>Austria</td>&nbsp; </tr>&nbsp; <tr id="D">&nbsp; &nbsp; <td>Island Trading</td>&nbsp; &nbsp; <td>Helen Bennett</td>&nbsp; &nbsp; <td>UK</td>&nbsp; </tr>&nbsp;&nbsp;</table></body></html>
0

守着一只汪

if ($("#someid").attr("sometable") === "something") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // code}
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答