Targeting einer Auswahlbox innerhalb der Kopfzeile einer Tabelle

Question

Der folgende Code funktioniert einwandfrei ohne die Tabelle Tags. Mit den Tabellen-Tags kann ich nicht den richtigen Ansatz zum Referenzieren des Auswahlkästchens finden. Also muss im Grunde das 'select' in $ ('select') in etwas anderes geändert werden, damit das funktioniert, was ich nicht herausfinden kann. Bitte helfen Sie. Vielen Dank.

<?php 

print_r($_POST); 

?> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> 

<table> 
    <form id= "Cars" action="" method="post" > 
     <th> 
     CARS: <select name="ddcars" id="ppcars" > 
      <option value="">Choose</option> 
      <option value="1">Toyota</option> 
      <option value="2">Nissan</option> 
      </select> 
     </th> 
    </form> 


    <form id="trucks" action="" method="post"> 
     <th> 
     TRUCKS : <select name="ddtrucks" id="pptrucks" > 
      <option value="">Choose</option> 
      <option value="1">TATA</option> 
      <option value="2">Nissan</option> 
     </select> 
     </th> 
    </form> 
</table> 


<script> 
    $(document).ready(function() { 
     $('select').change(function() { 
      $(this).parent('form').submit(); 
     }); 
    }); 
</script> 

Answer 1

Wenn Sie nur eine select haben, dann sollte $('select') gut funktionieren.

aber Sie haben ungültige HTML

dies falsch ist

<table> 
    <form id= "Cars" action="" method="post" > 
     <th> 
     CARS: <select name="ddcars" id="ppcars" > 

dies richtig ist

<table> 
    <th> 
    <form id= "Cars" action="" method="post" > 
      CARS: <select name="ddcars" id="ppcars" > 

wenn Sie die oben genannten Hierarchie verwenden, $(this).parent('form').submit(); korrekt ist, auch .

Arbeits Fiddle:https://jsfiddle.net/5qtLu3pk/

Answer 2

1. Es ist nicht Element tr. table brauchen tr und dann th.
2. Das Element table darf kein Element form enthalten. Setzen Sie form innerhalb th.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th> 
 
     <form id= "Cars" action="" method="post" > 
 
     CARS: <select name="ddcars" id="ppcars" > 
 
     <option value="">Choose</option> 
 
     <option value="1">Toyota</option> 
 
     <option value="2">Nissan</option> 
 
     </select> 
 
     </form> 
 
    </th> 
 

 
    <th> 
 
     <form id="trucks" action="" method="post"> 
 
     TRUCKS : <select name="ddtrucks" id="pptrucks" > 
 
     <option value="">Choose</option> 
 
     <option value="1">TATA</option> 
 
     <option value="2">Nissan</option> 
 
     </select> 
 
     </form> 
 
    </th> 
 
    </tr> 
 
</table> 
 

 
<script> 
 
    $(document).ready(function() { 
 
    $('select').change(function() { 
 
     $(this).parent('form').submit(); 
 
    }); 
 
    }); 
 
</script>