[英]Can I improve this method of displaying divs based on selected option? (tag select & display div)
[英]Display table row based on the selected option of Select html tag
因此,我尝试根据用户所在的国家/地区显示表的内容。 基本上,如果用户选择美国作为选项,他将获得一个包含显示的美国数据的表格行。.我使用了带有选项的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');
});
问候,
谢谢!
那不是连接的方法,请尝试以下方法:
$('#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');
});
尝试这个:
$('#data').change(function() {
//Only show specific row
$('tr#' + $(this).val()).show();
//hide other rows
$("tr:not(:#"+$(this).val()+")").hide();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.