在 <select> 更改时淡入和淡出 <tbody> 元素答案

【问题标题】：Fade-In & Out a <tbody> element on <select> change在 <select> 更改时淡入和淡出 <tbody> 元素
【发布时间】：2016-11-19 01:18:52
【问题描述】：

我有一个<select> 下拉菜单，它根据使用 JavaScript 选择的内容显示不同的输入字段。

<select name="country" onchange="SelectCheck(this);" id="country">
            <option value="United States of America" id="USA">United States of America</option>
            <option value="Afganistan">Afghanistan</option>
            <option value="Albania">Albania</option>
            <option value="Algeria">Algeria</option>
            <option value="American Samoa">American Samoa</option>
            <option value="Andorra">Andorra</option>
            <option value="Angola">Angola</option>
            <option value="Anguilla">Anguilla</option>
            <option value="Antigua &amp; Barbuda">Antigua &amp; Barbuda</option>
            <option value="Argentina">Argentina</option>
            <option value="Armenia">Armenia</option>
            <option value="Aruba">Aruba</option>
            <option value="Australia">Australia</option>
...
</select>

输入标签被包裹在<tbody> 标签中。我必须这样做，因为它在表格内，<div> 标记不起作用。

<tbody id="USDLdiv" style="display:none;"> 
        <tr>
                <td><input type="text" placeholder="USA License No."></td>
        </tr>
</tbody>

我想在您切换选项时添加淡入淡出效果。

我得到的是：

$selectoption = $("#country");

$("select", $selectoption).change(function() {
    $("tbody > tr", $selectoption).fadeOut();
});

但它不起作用。

【问题讨论】：

这对你有用吗？ jsfiddle.net/op2zjb8p
是否有一行，您正在使用淡入/淡出效果动态更改其值，或者您只想显示和隐藏表格中的多行？！ ...如果是第一次检查这个jsfiddle.net/yox5m4r8，如果是第二次，那么前面的小提琴应该可以工作！
"it's not working" 不是正确的问题描述，如果没有上下文也毫无意义

标签： javascript jquery html select onchange

【解决方案1】：

显示的代码正在寻找一个<select>，它是#country 的后代，但#country 是<select>，并且没有这样的后代。

类似地，在事件处理程序中，您正在寻找一个 <tr>，它是 <select> 的后代，而 a 没有这样的后代

试试：

$("#country").change(function() {
    $("tbody > tr").fadeOut();
});

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<select name="country" id="country">
	    <option value="usa">United States of America</option>
	    <option value="afg">Afghanistan</option>
	    <option value="alb">Albania</option>
	    <option value="alg">Algeria</option>
	</select>

	<table>
		<tbody> 
	        <tr id="usa">
	            <td><input type="text" placeholder="USA License No."></td>
	        </tr>
	        <tr id="afg">
	            <td><input type="text" placeholder="Afghanistan License No."></td>
	        </tr>
	        <tr id="alb">
	            <td><input type="text" placeholder="Albania License No."></td>
	        </tr>
	        <tr id="alg">
	            <td><input type="text" placeholder="Algeria License No."></td>
	        </tr>
		</tbody>
	</table>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('tr').hide();
		$(document).on('change','#country', function(){
			var send = $(this).val();
			$('tr').fadeOut();
			$('#'+send).fadeIn();
		});
	});
</script>
</html>

希望对你有帮助！

【讨论】：