フェードイン＆アウト<tbody>要素<select>変更

私は<select>ドロップダウンメニューを持っています。これは、JavaScriptを使用して選択した内容に応じて異なる入力フィールドを表示します。フェードイン＆アウト<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エフェクトを使って値を動的に変更している行が1つありますか、表示したり隠したりすることができるテーブルには複数の行がありますか？！ ...これが最初にhttps://jsfiddle.net/yox5m4r8/をチェックするのであれば、前のフィドルがうまくいくはずです。 – semuzaboi

*「うまくいきません」*は適切な問題の説明ではなく、コンテキストがなければかなり無意味です – charlietfl

コードは、#countryの子孫である<select>を探していますが、は<select>であり、そのような子孫はありません。

同様にあなたが<select>の子孫であり、Aは、そのような

子孫試していません <tr>を探しているイベントハンドラ内：

$("#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

フェードイン＆アウト<tbody>要素<select>変更

答えて

関連する問題