如何根据下拉列表中的选择隐藏表格行

How can I hide a table row based on selection made in dropdown

本文关键字：选择 隐藏 表格 何根 下拉列表      更新时间：2023-09-26

我有一个下拉菜单，当在另一行的下拉菜单中选择法国时，我想隐藏它。我想隐藏整行，以便隐藏县和下拉菜单。下面是我尝试过的CSS，JS，以及JSFiddle中相同的链接。

<table>
<tr>
<td class="BBFieldCaption DonationCaptureFieldCaption" id="PC1920_DonationCapture1_AddressCtl_lbl_country">
<label id="PC1920_DonationCapture1_AddressCtl_lblCountry" for="PC1920_DonationCapture1_AddressCtl_dd_Country">Country:</label>
</td>
<td>
<select class="BBFormSelectList DonationCaptureSelectList" id="PC1920_DonationCapture1_AddressCtl_dd_Country" onchange="javascript:setTimeout('__doPostBack(''PC1920$DonationCapture1$AddressCtl$dd_Country'','''')', 0)" name="PC1920$DonationCapture1$AddressCtl$dd_Country">
<option value=""></option>
<option value="Australia">Australia</option>
<option value="Bahamas">Bahamas</option>
<option value="Bermuda">Bermuda</option>
<option value="Canada">Canada</option>
<option value="France" selected="selected">France</option>
<option value="Germany">Germany</option>
<option value="Italy">Italy</option>
</select>
</td>
</tr>
<tr>
<td class="BBFieldCaption DonationCaptureFieldCaption" id="PC1920_DonationCapture1_AddressCtl_lbl_countyUK">
<label id="PC1920_DonationCapture1_AddressCtl_lblCountyUK" for="PC1920_DonationCapture1_AddressCtl_dd_CountyUK">County:</label>
</td>
<td class="taLeft BBFieldControlCell DonationCaptureFieldControlCell" id="PC1920_DonationCapture1_AddressCtl_ctl_countyUK">
<select class="BBFormSelectList DonationCaptureSelectList" id="PC1920_DonationCapture1_AddressCtl_dd_CountyUK" name="PC1920$DonationCapture1$AddressCtl$dd_CountyUK">
<option value="" selected="selected"></option>
<option value="Alcorn">Alcorn</option>
<option value="Alexander">Alexander</option>
</select>
</td>
</tr>
</table>

我尝试通过添加以下内容来使用 jquery 执行此操作，但无法使其正常工作：

$(document).ready(function() {
$('#PC1920_DonationCapture1_AddressCtl_dd_Country').change(function() {
PC1920$DonationCapture1$AddressCtl$dd_Country = $('#PC1920_DonationCapture1_AddressCtl_dd_Country').val();
$('PC1920_DonationCapture1_AddressCtl_ctl_countyUK').hide();
if (PC1920$DonationCapture1$AddressCtl$dd_Country == 'France')
{
 $('PC1920_DonationCapture1_AddressCtl_ctl_countyUK').hide();
}
});
});

我无法直接访问表单的 HTML，这是使用 CMS 系统。我也已将其添加到JSFiddle中，任何帮助将不胜感激。谢谢！请参阅此处的 JSFiddle：http://jsfiddle.net/jelane20/qG2bT/7/

您的选择器中似乎缺少一个 #。改变

if (PC1920$DonationCapture1$AddressCtl$dd_Country == 'France')
{
     $('PC1920_DonationCapture1_AddressCtl_ctl_countyUK').hide();
}

自 

if (PC1920$DonationCapture1$AddressCtl$dd_Country == 'France')
{
     $('#PC1920_DonationCapture1_AddressCtl_ctl_countyUK').hide();
}

试试这样的事情—— 

 $(document).ready(function () {
     $('#PC1920_DonationCapture1_AddressCtl_dd_Country').change(function () {
         $(this).parents('tr').next().toggle($(this).val() !== "France");
     });
 });

在这里摆弄

相关文章：