最近的功能不工作在JQuery

Question

我正在做一個選擇列表。

現在我要「新」，根據與類舊列表中選擇變」，以顯示與類選擇列表中的選項。

一樣，選擇了該選項時1，3,4,5是可見，並且選擇了該選項時2，6,7,8都是可見的。

另外，我要控制在相應的行中的選項。

$(document).ready(function() { 
 
    $(".new").children('option:gt(0)').hide(); 
 
    $('.new option[value="select"]').show(); 
 
    $('.new option[value="1"]').show(); 
 
    $('.new option[value="2"]').show(); 
 
    $('.new option[value="3"]').show(); 
 
    $(function() { 
 
    $(".old").change(function() { 
 
     var a = $(this).val(); 
 
     if (a == 2) { 
 
     $(".new").children('option:gt(0)').hide(); 
 
     $('$(this).closest('tr').find('.new') option[value="select"]').show(); 
 
     $('$(this).closest('tr').find('.new') option[value="4"]').show(); 
 
     $('$(this).closest('tr').find('.new') option[value="5"]').show(); 
 
     $('$(this).closest('tr').find('.new') option[value="6"]').show(); 
 
     }; 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <select class="old"> 
 
     <option value="1">1</option> 
 
     <option value="2">2</option> 
 
     </select> 
 
    </td> 
 
    <td> 
 
     <select class="new"> 
 
     <option value="3">3</option> 
 
     <option value="4">4</option> 
 
     <option value="5">5</option> 
 
     <option value="6">6</option> 
 
     <option value="7">7</option> 
 
     <option value="8">8</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <select class="old"> 
 
     <option value="1">1</option> 
 
     <option value="2">2</option> 
 
     </select> 
 
    </td> 
 
    <td> 
 
     <select class="new"> 
 
     <option value="3">3</option> 
 
     <option value="4">4</option> 
 
     <option value="5">5</option> 
 
     <option value="6">6</option> 
 
     <option value="7">7</option> 
 
     <option value="8">8</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 1

你有一些語法錯誤jQuery聲明

$(document).ready(function() { 
    $(".new").children('option:gt(0)').hide(); 
    $('.new option[value="select"]').show(); 
    $('.new option[value="1"]').show(); 
    $('.new option[value="2"]').show(); 
    $('.new option[value="3"]').show(); 
    $(function() { 
     $(".old").change(function() { 
      var a = $(this).val(); 
      if (a == 2) { 
       $(".new").children('option:gt(0)').hide(); 
       $(this).closest('tr').find('.new option[value="select"]').show(); 
       $(this).closest('tr').find('.new option[value="4"]').show(); 
       $(this).closest('tr').find('.new option[value="5"]').show(); 
       $(this).closest('tr').find('.new option[value="6"]').show(); 
      }; 
     }); 
    }); 
}); 

Answer 2

你需要在你的jQuery調用刪除無效報價。

另外，$(function(){})是$(document).ready(function(){})的簡寫，因此您不需要兩次就緒功能。

$(function() { 
 
    // Hide all children for all 'new' combos. 
 
    $('.new').children('option:gt(0)').hide(); 
 
    
 
    // Show only first three 'new' items (if available). 
 
    $('.new option[value="select"]').show(); 
 
    $('.new option[value="1"]').show(); 
 
    $('.new option[value="2"]').show(); 
 
    $('.new option[value="3"]').show(); 
 

 
    $('.old').change(function() { 
 
    var a = $(this).val(); 
 
    if (a == 2) { 
 
     // Hide all children for all 'new' combos. 
 
     $('.new').children('option:gt(0)').hide(); 
 
     
 
     // Show only the 'new' items for the current row. 
 
     let $rowNew = $(this).closest('tr').find('.new'); 
 
     $rowNew.find('option[value="select"]').show(); 
 
     $rowNew.find('option[value="4"]').show(); 
 
     $rowNew.find('option[value="5"]').show(); 
 
     $rowNew.find('option[value="6"]').show(); 
 
    }; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <select class="old"> 
 
     <option value="1">1</option> 
 
     <option value="2">2</option> 
 
     </select> 
 
    </td> 
 
    <td> 
 
     <select class="new"> 
 
     <option value="3">3</option> 
 
     <option value="4">4</option> 
 
     <option value="5">5</option> 
 
     <option value="6">6</option> 
 
     <option value="7">7</option> 
 
     <option value="8">8</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <select class="old"> 
 
     <option value="1">1</option> 
 
     <option value="2">2</option> 
 
     </select> 
 
    </td> 
 
    <td> 
 
     <select class="new"> 
 
     <option value="3">3</option> 
 
     <option value="4">4</option> 
 
     <option value="5">5</option> 
 
     <option value="6">6</option> 
 
     <option value="7">7</option> 
 
     <option value="8">8</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
</table>