问题：
用jQuery隐藏未选定的表TR TD内容
罗昕
我试图隐藏表内容的一部分，但隐藏未选中的选项的标签有困难。
我有以下三种选择。如果我的用户选择了其中一个，我想隐藏其他两个，只显示标签和选择的选择。现在，除了标签，我可以隐藏其他的一切。
我尝试添加一个$(this).最近的（“tr td.text-prompt”）.show（）；
和一个$（“tr td.text-prompt”）.不是($(this)).hide（）；
但这并不能隐藏未被选中的组。请帮忙弄清楚...
null
$(document).ready(function () {
$("select").each(function () {
$(this).on("change", function () {
var val = $(this).val();
//alert(val);
console.log(val);
if (val > 0) {
$('.add-to-cart').show();
$('#selectPhoto').hide();
$('.attribute-description').hide();
$("select").hide();
$(this).show();
} else {
$("select").show();
$('#selectPhoto').show();
$('.attribute-description').show();
$('.add-to-cart').hide();
// $(this).hide();
}
});
});
});
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td id=product_attribute_label_390>
<label class=text-prompt>CANVAS PRINTS </label>
<div class=attribute-description>
<p>Please Choose your Size:
</div>
</td>
<td id=product_attribute_input_390>
<select name=product_attribute_390 id=product_attribute_390>
<option value=0>---
<option value=2391>8 "X 12 "[+$26.00]
<option value=2392>10 "X 12 "[+$28.00]
<option value=2393>16 "X 20 "[+$35.00]
<option value=2394>20 "X 24 "[+$60.00]
<option value=2395>24 "X 36 "[+$50.00]
<option value=2396>30 "X 40 "[+$66.00]
<option value=2397>36 "X 48 "[+$142.00]
<option value=2398>40 "X 60 "[+$200.00]
</select>
</td>
</tr>
<tr>
<td id=product_attribute_label_386>
<label class=text-prompt>ACRYLIC PRINTS </label>
<div class=attribute-description>
<p>Please Choose your Size:
</div>
</td>
<td id=product_attribute_input_386>
<select name=product_attribute_386 id=product_attribute_386>
<option value=0>---
<option value=2361>8 "x 12 "[+$70.00]
<option value=2362>12 "X 16 "[+$80.00]
<option value=2363>12 "X 36 "[+$160.00]
<option value=2364>16 "x 20 "[+$110.00]
<option value=2365>20 "x 24 "[+$208.00]
<option value=2366>20 "x 30 "[+$220.00]
<option value=2367>30 "x 40 "[+$280.00]
</select>
</td>
</tr>
<tr>
<td id=product_attribute_label_387>
<label class=text-prompt>METAL PRINTS </label>
<div class=attribute-description>
<p>Please Choose your Size:
</div>
</td>
<td id=product_attribute_input_387>
<select name=product_attribute_387 id=product_attribute_387>
<option value=0>---
<option value=2368>8 "x 12 "[+$60.00]
<option value=2369>12 "x 16 "[+$70.00]
<option value=2370>12 "x 36 "[+$252.00]
<option value=2371>16 "x 20 "[+$80.00]
<option value=2372>20 "x 24 "[+$160.00]
<option value=2373>20 "x 30 "[+$220.00]
<option value=2374>30 "x 40 "[+$356.00]
</select>
</td>
</tr>
</table>null
共有1个答案
鲜于华容
您可以在同一行中查找.text-prompt类：
null
$(document).ready(function () {
$("select").each(function () {
$(this).on("change", function () {
var val = $(this).val();
//alert(val);
console.log(val);
if (val > 0) {
$('.add-to-cart').show();
$('#selectPhoto').hide();
$('.attribute-description').hide();
$("select").hide();
$('.text-prompt').hide();
$(this).show();
$(this).closest('tr').find('.text-prompt').show();
} else {
$("select").show();
$('#selectPhoto').show();
$('.attribute-description').show();
$('.add-to-cart').hide();
$('.text-prompt').show();
}
});
});
});
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td id=product_attribute_label_390>
<label class=text-prompt>CANVAS PRINTS </label>
<div class=attribute-description>
<p>Please Choose your Size:
</div>
</td>
<td id=product_attribute_input_390>
<select name=product_attribute_390 id=product_attribute_390>
<option value=0>---
<option value=2391>8 "X 12 "[+$26.00]
<option value=2392>10 "X 12 "[+$28.00]
<option value=2393>16 "X 20 "[+$35.00]
<option value=2394>20 "X 24 "[+$60.00]
<option value=2395>24 "X 36 "[+$50.00]
<option value=2396>30 "X 40 "[+$66.00]
<option value=2397>36 "X 48 "[+$142.00]
<option value=2398>40 "X 60 "[+$200.00]
</select>
</td>
</tr>
<tr>
<td id=product_attribute_label_386>
<label class=text-prompt>ACRYLIC PRINTS </label>
<div class=attribute-description>
<p>Please Choose your Size:
</div>
</td>
<td id=product_attribute_input_386>
<select name=product_attribute_386 id=product_attribute_386>
<option value=0>---
<option value=2361>8 "x 12 "[+$70.00]
<option value=2362>12 "X 16 "[+$80.00]
<option value=2363>12 "X 36 "[+$160.00]
<option value=2364>16 "x 20 "[+$110.00]
<option value=2365>20 "x 24 "[+$208.00]
<option value=2366>20 "x 30 "[+$220.00]
<option value=2367>30 "x 40 "[+$280.00]
</select>
</td>
</tr>
<tr>
<td id=product_attribute_label_387>
<label class=text-prompt>METAL PRINTS </label>
<div class=attribute-description>
<p>Please Choose your Size:
</div>
</td>
<td id=product_attribute_input_387>
<select name=product_attribute_387 id=product_attribute_387>
<option value=0>---
<option value=2368>8 "x 12 "[+$60.00]
<option value=2369>12 "x 16 "[+$70.00]
<option value=2370>12 "x 36 "[+$252.00]
<option value=2371>16 "x 20 "[+$80.00]
<option value=2372>20 "x 24 "[+$160.00]
<option value=2373>20 "x 30 "[+$220.00]
<option value=2374>30 "x 40 "[+$356.00]
</select>
</td>
</tr>
</table>
类似资料：
-
如果我想在不同的结构上使用相同的解决方案，比如dl dt模块而不是表，该怎么办？我将如何构造JQuery代码以显示所选产品的标签？ 我尝试了多种方法来显示最近的标签，但都没有效果。 请参阅要演示的代码段。 我尝试使用JQuery隐藏未选择的标签，但找不到有选择地显示活动选择的方法。 null null
-
如何自动隐藏或删除DIV的内容。我把一些信息放在一个容器里。 我想显示新消息只有几秒钟，它可以是5,10什么，但然后我想它是空的，添加新消息，显示它，而不是隐藏。我当然知道setTimeout的"诀窍"： 但是在这个选项中，我必须通过每个消息传递这个脚本，这不是我要找的。我也尝试过setInterval，但是正如名字所说，它是间隔，所以消息可以在5秒钟内可见，或者如果它到达间隔时间的末尾，甚至可以
-
主要内容：实例,jQuery hide() 和 show(),实例,实例,实例,jQuery toggle(),实例隐藏、显示、切换，滑动，淡入淡出，以及动画，哇哦！ 因为时间是宝贵的，我们提供快捷方便的学习方法。 在小牛知识库,你可以学习需要的知识。 实例 jQuery hide() 简单的jQuery hide()方法演示。 jQuery hide() 另一个hide()实例。演示如何隐藏文本。 jQuery hide() 和 show() 通过 jQuery，您可以使用 hide() 和
-
问题内容： 这是我的代码。为什么不起作用？ 问题答案： 您正在加载DOM之前运行代码。 尝试这个： 现场示例：
-
我正在更新一个隐藏字段#start，有两个字段：一个文本字段（用于时间）和一个datepicker字段。但是，当我使用datepicker选择一个日期，并且时间字段中没有任何内容时，隐藏字段不会更新。此外，当填写时间字段并且我通过datepicker选择一个日期时，该日期将使用先前的选择更新，而不是最近选择的日期（可能是由于正在更新的输入值）。我怎样才能正确地编写这个函数呢？谢谢你！
-
我有一个使用jquery隐藏的表单，单击它就会显示出来。我想使用php发布数据，但单击“提交”时什么也没发生。参见代码 if（isset（$_POST['mail it'])) { echo"do某事"；}