问题描述
我一直在学习 JQuery。以下代码旨在根据 <option value>
的 <select id = "changeId">
添加和更改下拉选项,
这是“父”更改功能。
我想在没有 css 的情况下隐藏表 2。我可以用 css 隐藏,但我想使用 jquery 的隐藏选项,因为我已经读到我可以像这样隐藏任何表格行。
$('.tableClass tr[id="tablerow_2"]').hide();
如何在不使用任何 css 仅 Jquery 的情况下让下面的小提琴工作/隐藏?基本上我想从隐藏苹果开始,然后继续隐藏所有三个。
小提琴:https://jsfiddle.net/wj_fiddle_playground/57rzfm9o/6/
Javascript
<script>
$(document).ready(function(){
$("#changeId").change(function(){
var optionValue = $(this).val();
//css Works
<!--$('.exampleCSS').hide();-->
//not working
//$('#tablerow_2').hide();
//not working
//$('.tableClass tr[id="tablerow_2"]').hide();
if(optionValue){
$(`#${optionValue}`).show();
}
}).change();
});
</script>
HTML
<table class = "tableClass">
<tr id = "tablerow_1">
<select id = "changeId">
<option value="">-- Please Select --</option>
<option value="appleValue">Apple</option>
<option value="bananaValue">Banana</option>
<option value="orangeValue">Orange</option>
</select>
</tr>
<tr id = "tablerow_2">
<select id = "appleValue" <!--class="exampleCSS"-->>
<option value="1">Red DelicIoUs</option>
<option value="2">Granny Smith</option>
</select>
</tr>
<tr id="tablerow_3">
<select id = "bananaValue">
<option value="1">Plantain</option>
<option value="2">Dancing Banana</option>
</select>
</tr>
<tr id = "tablerow_4">
<select id = "orangeValue" >
<option>Blood</option>
<option>Navel</option>
<option>Florida</option>
</select>
</tr>
</table>
解决方法
基本上我想从隐藏苹果开始,然后继续隐藏所有三个。
我的建议是使用不带 id 的类,隐藏所有而不是一个一个地选择 id 会容易得多。这就是为什么你的代码没有按预期工作,因为 table > tr > td
你忘了添加<td></td>
一切正常
我在这里的建议
$(document).ready(function(){
$("#changeId").change(function(){
var optionValue = $(this).val();
//css Works
//$('.exampleCSS').hide();
//works
$('#tablerow_2').hide();
//works
$('.tableClass tr#tablerow_2').hide();
if(optionValue){
$(`#${optionValue}`).show();
}
}).change();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tableClass">
<tr id = "tablerow_1">
<td>
<select id = "changeId">
<option value="">-- Please Select --</option>
<option value="appleValue">Apple</option>
<option value="bananaValue">Banana</option>
<option value="orangeValue">Orange</option>
</select>
</td>
</tr>
<tr id="tablerow_2">
<td>
<select id = "appleValue" >
<option value="1">Red Delicious</option>
<option value="2">Granny Smith</option>
</select>
</td>
</tr>
<tr id="tablerow_3">
<td>
<select id = "bananaValue">
<option value="1">Plantain</option>
<option value="2">Dancing Banana</option>
</select>
</td>
</tr>
<tr id = "tablerow_4">
<td>
<select id="orangeValue" >
<option>Blood</option>
<option>Navel</option>
<option>Florida</option>
</select>
</td>
</tr>
</table>