淡入和淡出 <tbody> 上的元素 <select>更改

Question

我有一個<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();
});

但這不起作用。

Answer 1

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

同樣，在事件處理程序中，您正在尋找<tr> ，它是<select>的后代，而a沒有這樣的后代

嘗試：

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

Answer 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>

希望它能對您有所幫助！

淡入和淡出 <tbody> 上的元素 <select>更改

問題描述

2 個解決方案

解決方案1
0 2016-11-19 02:08:04

解決方案2
0 2016-11-19 04:36:57

淡入和淡出 <tbody> 上的元素 <select>更改

問題描述

2 個解決方案

解決方案1 0 2016-11-19 02:08:04

解決方案2 0 2016-11-19 04:36:57

解決方案1
0 2016-11-19 02:08:04

解決方案2
0 2016-11-19 04:36:57