How to get the nearest selected dropdown value in jquery?

Question

I am trying to get the selected value of the select dropdown but I am getting undefined. I have a comment icon on the list and when I click on it then I am getting undefined. I tried some alerts in the script but all are not working.

Any help with this?

 $(document).on('click', '#wip_remarkUpdate', function(e) { e.preventDefault(); alert($(this).closest('.actionslist li .wip_fileStatus').find('select').val()); alert($('.wip_fileStatus').find("select").val()); alert($('#workInProgress').closest('select').find(':selected').val()); });

 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"> <div id="workInProgress"> <table border="1"> <thead> <tr> <th>Test1</th> <th>Test2</th> <th>Test3</th> <th>Test4</th> </tr> </thead> <tbody> <tr role="row" class="odd"> <td>asdasdasd asd asd</td> <td>alskda asd</td> <td>dkasdkad</td> <td> <ul class="actionslist"> <li> <select name="pp_fileStatus[]" class="form-control multipleselect wip_fileStatus" data-id="130"> <option value="" disabled="" selected="">File Status</option> <option value="1">Approved</option> <option value="2" selected="">Aggrement</option> <option value="3">Rejected</option> <option value="4">Dropped</option> </select> </li> <li><a href="javascript:void(0);" id="wip_remarkUpdate" data-id="130"><i class="far fa-comment"></i></a></li> </ul> </td> </tr> <tr role="row" class="even"> <td>asdasdasd asd asd</td> <td>alskda asd</td> <td>dkasdkad</td> <td> <ul class="actionslist"> <li> <select name="pp_fileStatus[]" class="form-control multipleselect wip_fileStatus" data-id="130"> <option value="" disabled="" selected="">File Status</option> <option value="1">Approved</option> <option value="2">Aggrement</option> <option value="3">Rejected</option> <option value="4" selected="">Dropped</option> </select> </li> <li><a href="javascript:void(0);" id="wip_remarkUpdate" data-id="130"><i class="far fa-comment"></i></a></li> </ul> </td> </tr> </tbody> </table> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 1

You can find as below.

Also use class instead of id , because ID is unique things in document so class you can use..

 $(document).on('click', '.wip_remarkUpdate', function(e) { e.preventDefault(); //alert($(this).closest('.actionslist li .wip_fileStatus').find('select').val()); alert( $(this).parents('.actionslist').find('select').find(':selected').val() ); alert( $(this).closest('li').siblings('li').find('select').val() ); });

 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"> <div id="workInProgress"> <table border="1"> <thead> <tr> <th>Test1</th> <th>Test2</th> <th>Test3</th> <th>Test4</th> </tr> </thead> <tbody> <tr role="row" class="odd"> <td>asdasdasd asd asd</td> <td>alskda asd</td> <td>dkasdkad</td> <td> <ul class="actionslist"> <li> <select name="pp_fileStatus[]" class="form-control multipleselect wip_fileStatus" data-id="130"> <option value="" disabled="" selected="">File Status</option> <option value="1">Approved</option> <option value="2" selected="">Aggrement</option> <option value="3">Rejected</option> <option value="4">Dropped</option> </select> </li> <li><a href="javascript:void(0);" id="wip_remarkUpdate" data-id="130"><i class="far fa-comment wip_remarkUpdate"></i></a></li> </ul> </td> </tr> <tr role="row" class="even"> <td>asdasdasd asd asd</td> <td>alskda asd</td> <td>dkasdkad</td> <td> <ul class="actionslist"> <li> <select name="pp_fileStatus[]" class="form-control multipleselect wip_fileStatus" data-id="130"> <option value="" disabled="" selected="">File Status</option> <option value="1">Approved</option> <option value="2">Aggrement</option> <option value="3">Rejected</option> <option value="4" selected="">Dropped</option> </select> </li> <li><a href="javascript:void(0);" id="wip_remarkUpdate" data-id="130"><i class="far fa-comment wip_remarkUpdate"></i></a></li> </ul> </td> </tr> </tbody> </table> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 2

I have find you are not getting the perfect access of select. Just replace this.

$(document).on('click', '#wip_remarkUpdate', function(e) {
    e.preventDefault();
    alert($(this).closest('ul').find('li').find('select').val());
});

Answer 3

First thing you can not give same id to all a tag give a classname instead

$(document).on('click', '.wip_remarkUpdate', function(e) {
  e.preventDefault();
  alert($(this).parent("ul").children("li").first().find("select").val() );
});