根據選擇html標簽的所選選項顯示表格行

Question

因此，我嘗試根據用戶所在的國家/地區顯示表的內容。 基本上，如果用戶選擇美國作為選項，他將獲得一個包含顯示的美國數據的表格行。.我使用了帶有選項的select，並且每個選項都有國家/地區的域擴展名作為值（例如，對於Brazil選項，值是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(); 
});