Get ausgewählten Text aus Textbox neben einem ausgewählten Kontrollkästchen

Question

Ich habe eine Tabelle mit einem Kontrollkästchen, etwas Text und ein Auswahlfeld. Der Benutzer wird ein Kontrollkästchen auswählen und dann einen Wert im Auswahlfeld auswählen. Ich versuche herauszufinden, ob der Benutzer einen Wert in dem Auswahlfeld ausgewählt hat, das den aktivierten Kontrollkästchen entspricht.

Im Anschluss ist mein Code:

$(document).ready(function() { 
 
    console.log("ready!"); 
 

 
    $("#submit").click(function() { 
 

 
    $(".cb:checked").each(function() { 
 
     var cb = $(this); 
 
     console.log(cb.find('select option:selected').text()); 
 
     if (cb.find('select option:selected').text() == "-") { 
 
     cb.find('select').css("border-color", "red"); 
 
     } 
 
    }) 
 
    }); 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <input class="cb" type="checkbox"> 
 
    </td> 
 
    <td>some text</td> 
 
    <td> 
 
     <select> 
 
     <option>-</option> 
 
     <option>abc</option> 
 
     <option>def</option> 
 
     <option>ghi</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input class="cb" type="checkbox"> 
 
    </td> 
 
    <td>some text</td> 
 
    <td> 
 
     <select> 
 
     <option>-</option> 
 
     <option>abc</option> 
 
     <option>def</option> 
 
     <option>ghi</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
    <input class="cb" type="checkbox"> 
 
    </td> 
 
    <td>some text</td> 
 
    <td> 
 
     <select> 
 
     <option>-</option> 
 
     <option>abc</option> 
 
     <option>def</option> 
 
     <option>ghi</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input class="cb" type="checkbox"> 
 
    </td> 
 
    <td>some text</td> 
 
    <td> 
 
     <select> 
 
     <option>-</option> 
 
     <option>abc</option> 
 
     <option>def</option> 
 
     <option>ghi</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input class="cb" type="checkbox"> 
 
    </td> 
 
    <td>some text</td> 
 
    <td> 
 
     <select> 
 
     <option>-</option> 
 
     <option>abc</option> 
 
     <option>def</option> 
 
     <option>ghi</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
</table> 
 
<button id="submit"> 
 
    Save 
 
</button>

Der ausgewählte Text Wert scheint immer leer zu sein. Was mache ich falsch ?

Answer 1

Ich habe closest() verwendet, um an die tr Eltern-Tag zu gelangen und dann find angewendet, um zu entsprechenden Kontrollkästchen zu gelangen.

$(document).ready(function() { 
 
    console.log("ready!"); 
 

 
    $("#submit").click(function(e) { 
 

 
    $(".cb:checked").each(function() { 
 
     var cb = $(this); 
 
     console.log(cb.closest('tr').find('select option:selected').text()); 
 
     if (cb.closest('tr').find('select option:selected').text() == "-") { 
 
     cb.closest('tr').find('select').css("border-color", "red"); 
 
     } 
 
    }) 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <input class="cb" type="checkbox"> 
 
    </td> 
 
    <td>some text</td> 
 
    <td> 
 
     <select> 
 
     <option>-</option> 
 
     <option>abc</option> 
 
     <option>def</option> 
 
     <option>ghi</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input class="cb" type="checkbox"> 
 
    </td> 
 
    <td>some text</td> 
 
    <td> 
 
     <select> 
 
     <option>-</option> 
 
     <option>abc</option> 
 
     <option>def</option> 
 
     <option>ghi</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
    <input class="cb" type="checkbox"> 
 
    </td> 
 
    <td>some text</td> 
 
    <td> 
 
     <select> 
 
     <option>-</option> 
 
     <option>abc</option> 
 
     <option>def</option> 
 
     <option>ghi</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input class="cb" type="checkbox"> 
 
    </td> 
 
    <td>some text</td> 
 
    <td> 
 
     <select> 
 
     <option>-</option> 
 
     <option>abc</option> 
 
     <option>def</option> 
 
     <option>ghi</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input class="cb" type="checkbox"> 
 
    </td> 
 
    <td>some text</td> 
 
    <td> 
 
     <select> 
 
     <option>-</option> 
 
     <option>abc</option> 
 
     <option>def</option> 
 
     <option>ghi</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
</table> 
 
<button id="submit"> 
 
    Save 
 
</button>

Answer 2

Sie verwenden .find() mit jedem Kontrollkästchen, die untergeordneten Elemente, aber Ihre Auswahlboxen sind nicht Nachkommen der Kontrollkästchen sucht.

Sie .closest() mit .find() kombinieren, um könnten die gewählte Option, die das aktuelle Kontrollkästchen entspricht Ziel:

$(this).closest('tr').find('option').filter(':selected');

Answer 3

einfach Ihren Script-Code

$(document).ready(function() { 
 
    console.log("ready!"); 
 

 
    $("#submit").click(function() { 
 

 
    $(".cb:checked").each(function() { 
 
     var cb = $(this).parent().parent(); 
 
     console.log(cb.find('select option:selected').text()); 
 
     if (cb.find('select option:selected').text() == "-") { 
 
     cb.find('select').css("border-color", "red"); 
 
     } 
 
\t else 
 
\t \t cb.find('select').css("border-color", ""); 
 
    }) 
 
    }); 
 

 

 
});

zu

ändern