how to select the current selected dropdown option in a table td element
Question
//on selecting the current td element in each dropdown down in a row i want to disable the corresponding input td element but this code is working only for the first dropdown
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<script>
$( document ).ready(function() {
$("#d1").bind('change',function(){
if($(this).closest('tr').find('#d1').val() == 'saab'){
$("#d2").attr('disabled', 'disabled').val('');
}
else{
$("#d2").removeAttr('disabled');
}
});
});
</script>
</head>
<body>
<h1>Cab</h1>
<table border="0">
<tr>
<td class="select">Online Password (Repeated) </td>
<td><select name="D1" id="d1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select></td>
<td >
<input type="text" value="" id="d2">
<!-- above is the input textbox i want to disable-->
</td>
</tr><tr>
<td class="select">Online Password (Repeated) </td>
<td><select name="D1" id="d1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select></td>
<td >
<input type="text" value="" id="d2">
</td>
</tr>
<tr>
<td class="select">Online Password (Repeated) </td>
<td><select name="D1" id="d1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select></td>
<td>
<input type="text" value="" id="d2">
</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
// the function which i wrote is working only for the first td element , on selecting the second dropdown td the function call itself is not happening.
2 answers
solution1
0 ACCPTED 2017-01-13 13:17:58
There are few issues in you code.
1: HTML has duplicated id element which make html invalid.
2: You are attaching event with id selector which should be done if you want to bind an event with single element.
3: The selector used for find the input in same row are wrong again.
Try the below code.
I have changed the id attribute in your html to class and changed the logic to find the input element next to the select.
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> </head> <script> $(document).ready(function() { $(".d1").on('change', function() { var context = ($(this).parents("tr")); if ($(this).val() == 'saab') { $(".d2",context).attr('disabled', 'disabled').val(''); } else { $(".d2",context).removeAttr('disabled'); } }); }); </script> </head> <body> <h1>Cab</h1> <table border="0"> <tr> <td class="select">Online Password (Repeated) </td> <td> <select name="D1" class="d1"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </td> <td> <input type="text" value="" class="d2"> <!-- above is the input textbox i want to disable--> </td> </tr> <tr> <td class="select">Online Password (Repeated) </td> <td> <select name="D1" class="d1"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </td> <td> <input type="text" value="" class="d2"> </td> </tr> <tr> <td class="select">Online Password (Repeated) </td> <td> <select name="D1" class="d1"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </td> <td> <input type="text" value="" class="d2"> </td> </tr> <tr> </tr> </table> </body> </html>
solution2
0 2017-01-13 13:18:27
You should use a class for something like this.
I have removed the duplicate ID 's and added a class name of options
$(document).ready(function() { $(".options").bind('change', function() { if ($(this).val() == 'saab') { $(this).closest('tr').find('input').attr('disabled', 'disabled').val(''); } else { $(this).closest('tr').find('input').removeAttr('disabled'); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="0"> <tr> <td class="select">Online Password (Repeated) </td> <td> <select name="D1" class="options"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </td> <td> <input type="text" value=""> <!-- above is the input textbox i want to disable--> </td> </tr> <tr> <td class="select">Online Password (Repeated) </td> <td> <select name="D1" class="options"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </td> <td> <input type="text" value=""> </td> </tr> <tr> <td class="select">Online Password (Repeated) </td> <td> <select name="D1" class="options"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </td> <td> <input type="text" value=""> </td> </tr> <tr> </tr> </table>
UPDATE: "i want with same id as these dropdowns are coming as a string with hardcoded id which is same for all the dropdowns"
If you cannot add a class to those elements or edit the ID 's then this will work but I really do recommend you find a way to edit those ID 's and use a class name. This method will function just fine with no editing required to the HTML elements.
I have changed the selector to "select[id=d1]"
$(document).ready(function() { $("select[id=d1]").bind('change', function() { if ($(this).val() == 'saab') { $(this).closest('tr').find('input').attr('disabled', 'disabled').val(''); } else { $(this).closest('tr').find('input').removeAttr('disabled'); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="0"> <tr> <td class="select">Online Password (Repeated) </td> <td> <select name="D1" id="d1"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </td> <td> <input type="text" value="" id="d2"> <!-- above is the input textbox i want to disable--> </td> </tr> <tr> <td class="select">Online Password (Repeated) </td> <td> <select name="D1" id="d1"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </td> <td> <input type="text" value="" id="d2"> </td> </tr> <tr> <td class="select">Online Password (Repeated) </td> <td> <select name="D1" id="d1"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </td> <td> <input type="text" value="" id="d2"> </td> </tr> <tr> </tr> </table>
If you have any questions about the source code above please leave a comment below and I will get back to you as soon as possible.
I hope this helps. Happy coding!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.