I created an HTML table using ASP.NET MVC, my values are getting filled in table via controller function invoked in jQuery, I appended 3 columns a dropdown list, a textbox & a radio button for multiple selection. I have 2 buttons that reflects the values
of the dropdown list and when I click them I need to change only those dropdown lists that are with the same index as the checked radio buttons. I am trying to use .find() method because the columns are appended. However, it is giving me exception error as
the component is not allowing to change its value somehow.
This is my code that fills the data into HTML table:
As per the image if 1st & third radio buttons are selected & if I click on "Remove the selected members" button on the left the text on dropdown next to 1st & 3rd radio button is supposed to be changed to 'Remove'. No idea where I am going wrong.
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
21 Points
67 Posts
Changing the values of dropdown list reflecting the checked radio buttons in HTML table on button...
Jun 18, 2019 11:44 PM|vyasnikul|LINK
I created an HTML table using ASP.NET MVC, my values are getting filled in table via controller function invoked in jQuery, I appended 3 columns a dropdown list, a textbox & a radio button for multiple selection. I have 2 buttons that reflects the values of the dropdown list and when I click them I need to change only those dropdown lists that are with the same index as the checked radio buttons. I am trying to use .find() method because the columns are appended. However, it is giving me exception error as the component is not allowing to change its value somehow.
This is my code that fills the data into HTML table:
This is the code that I am using to try changing the value on btnRemove click:
My HTML Code:
Link to the image : https://imgur.com/Oe6mkkl
As per the image if 1st & third radio buttons are selected & if I click on "Remove the selected members" button on the left the text on dropdown next to 1st & 3rd radio button is supposed to be changed to 'Remove'. No idea where I am going wrong.
Contributor
2150 Points
705 Posts
Re: Changing the values of dropdown list reflecting the checked radio buttons in HTML table on bu...
Jun 19, 2019 02:56 AM|Jenifer Jiang|LINK
Hi vyasnikul,
According to your description, I suggest that you should first loop the table, since your button is out of the table.
Then you could find the each row's radio button and check its attribute.
At last, you could set the value to dropdownlist using $("#id").val() according to your if condition.
The condition that to check if the radio button is checked is: $("input .fakeRadio").is(':checked')
Here is my testing code and you could refer to.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" /> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <script> $(document).ready(function () { addTable = $("<table><tr><td><select id='ddlReqdAdjustment' class='form-control'><option>Keep</option><option>Remove</option><option>Remove After</option></select></td>\ <td><input type='text' class='form-control' disabled /></td>\ <td> <div class='form-control'><input type='radio' class='fakeRadio' checked/></td></tr>\ <tr><td><select id='ddlReqdAdjustment' class='form-control'><option>Keep</option><option>Remove</option><option>Remove After</option></select></td>\ <td><input type='text' class='form-control' disabled /></td>\ <td> <div class='form-control'><input type='radio' class='fakeRadio'/></td></tr></table>"); $("#containerDiv").append(addTable); }) $(document).on('click', '#btnRemove', function () { $("table tr").each(function () { if ($(this).find("input.fakeRadio").is(':checked')) { $("#ddlReqdAdjustment").val("Remove"); } }) }) </script> </head> <body> <a id="btnRemove">Remove The Selected Members</a> <br> <div id="containerDiv"> </div> </body> </html>
result:
Best Regards,
Jenifer
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
21 Points
67 Posts
Re: Changing the values of dropdown list reflecting the checked radio buttons in HTML table on bu...
Jun 19, 2019 08:59 PM|vyasnikul|LINK
Perfect Got it Jenifer Thanks!!
Here's the updated solution: