根据 Select html 标签的选中选项显示表格行

Question

所以我尝试根据用户所在的国家/地区显示表格的内容。基本上，如果用户选择美国作为选项，他会得到一个包含显示美国数据的表格行。我使用带有选项的选择，每个选项都有国家的域扩展作为值（例如，对于巴西选项，值为 br :<option value="br">Brazil</option>，加上它的表行与 ID 具有相同的选项值 (<tr id="br" style="display: none;">..</tr>)

用户在选项中选择国家/地区后，是否有任何脚本可以显示国家/地区数据？

谢谢，这是我的代码：

HTML：

<select id="data">
  <option value="#">Select a country ..</option>
  <option value="us">United States</option>
  <option value="es">Spain</option>
 <!-- more countries -->
</select>


<div id="container">

<table border="1">
 <tr>
  <td> Country </td>
  <td> Chance</td>
 </tr>
 <tr id="us"  style="display: none;">
  <td> United States </td>
  <td> 2.02 % </td>
 </tr>
 <tr id="es" style="display: none;">
  <td> Spain </td>
  <td> 2.12 % </td>
 </tr>
</table>

</div>

我尝试了以下方法：

Jquery：

$('#data').change(function() {
    $('tr#($(this).val())').css('display','block');
});

问候，

谢谢！

Answer 1

这不是连接的方式，试试这个：

$('#data').change(function() {
    $('tr#' + $(this).val()).css('display','block');
});

使用 OP 注释编辑：

为所有应该隐藏/显示的 TR 添加一个类，然后：

<table border="1">
 <tr>
  <td> Country </td>
  <td> Chance</td>
 </tr>
 <tr class="hideShowTr" id="us"  style="display: none;">
  <td> United States </td>
  <td> 2.02 % </td>
 </tr>
 <tr class="hideShowTr" id="es" style="display: none;">
  <td> Spain </td>
  <td> 2.12 % </td>
 </tr>
</table>

$('#data').change(function() {
    $('.hideShowTr').css('display','none');
    $('tr#' + $(this).val()).css('display','block');
});

Answer 2

试试这个：

$('#data').change(function() {
//Only show specific row    
$('tr#' + $(this).val()).show();
//hide other rows
$("tr:not(:#"+$(this).val()+")").hide(); 
});