淡入淡出a <tbody>元素<select>更改

我有一個<select>下拉菜單，根據使用JavaScript選擇的內容顯示不同的輸入字段。淡入淡出a <tbody>元素<select>更改

<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(); 
});

但它不工作。

來源

2016-11-19 Simon

這項工作適合你嗎？ https://jsfiddle.net/op2zjb8p/ – k97513

是否存在單行，您是否正在使用fadeIn/fadeOut效果動態更改值，或者表中是否存在多行顯示和隱藏的行？！ ...如果它是第一個檢查出這個https://jsfiddle.net/yox5m4r8/，如果它是第二個前小提琴應該工作！ – semuzaboi

*「它不工作」*不是一個適當的問題描述，沒有一些上下文是沒有意義的 – charlietfl

顯示的代碼正在尋找作爲#country的後裔的<select>，但#country是<select>，並且沒有這樣的後代。

同樣的事件處理程序，你裏面正在尋找一個<tr>那就是<select>的後裔和沒有這樣的後代

嘗試：

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

來源

2016-11-19 02:08:04 charlietfl

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

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

希望它能幫助你！

來源

2016-11-19 04:36:57

淡入淡出a <tbody>元素<select>更改

回答

相關問題