Появление и исчезновение элемента <tbody> при изменении <select>

У меня есть <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();
});

Но это не работает.

Источник

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>

Надеюсь, это поможет вам!

Источник

Показанный код ищет <select> это потомок #country но #country это <select> и не имеет такого потомка.

Точно так же внутри обработчика событий вы ищете <tr> это потомок <select> и не имеет такого потомка

Пытаться:

$("#country").change(function() {
    $("tbody > tr").fadeOut();
});
Источник
Другие вопросы по тегам