Dynamically setting the 'selected' attribute of Select list in Bootstrap Modal

Question

I have a Bootstrap modal that is triggered by a link that passes in a number of parameters which displays a select list for users to choose a rating between 1 and 5. This part is working well, but I now need to have the select menu display the value for the current rating instead of defaulting to 1 which is the first value in the list.

Here's my code:

 $(document).ready(function() { $('#editRatingModal').on('show.bs.modal', function(e) { recID = $(e.relatedTarget).data('rec-id'); clickedlink = e.relatedTarget; currentRating = clickedlink.getAttribute('currentRating'); contactName = clickedlink.getAttribute('contactName'); modalTitle = 'Edit Rating for ' + contactName; $('#editRatingModalTitle').html(modalTitle); $("#projectContactRecID").val(recID); //hide error/success alerts if previously showing $("#ajaxError1").hide(); $("#ajaxSuccess1").hide(); $("#callContact1").prop("disabled", false); console.log(recID); console.log(currentRating); console.log(contactName) }); }); //]]> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" /> <table class="table table-striped table-hover table-bordered"> <tbody> <tr> <td>Click Starts to Edit Rating</td> <td> <a href="#" contactName="Fred Simpson" currentRating="4" data-toggle="modal" data-rec-id="175091" data-target="#editRatingModal"> <div><span class="stars-container stars-80">★★★★★</span></div> </a> </td> </tr> </tbody> </table> <!-- Modal --> <div class="modal fade" id="editRatingModal" tabindex="-1" role="dialog" aria-labelledby="editRatingModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="editRatingModalTitle">Edit Rating</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <form id="editRatingFrom" action="projectDetails.php" method="post" role="form"> <input type="hidden" name="recid" value="16103"> <input type="hidden" name="projectContactRecID" value="" id="projectContactRecID"> <input type="hidden" name="action" value="editRating"> <div class="form-group"> <label for="newRating">Select Rating</label> <div class="input-group col-xs-8"> <select class="form-control" name="newRating" id="newRating"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary">Save Rating</button> </div> </form> </div> </div> </div> 

The currentRating variable contains the value that I want to add the selected attribute to in the select list, but not sure how to achieve this?

Answer 1

You can simply set the value to #newRating .

 $(document).ready(function() { $('#editRatingModal').on('show.bs.modal', function(e) { recID = $(e.relatedTarget).data('rec-id'); clickedlink = e.relatedTarget; currentRating = clickedlink.getAttribute('currentRating'); contactName = clickedlink.getAttribute('contactName'); modalTitle = 'Edit Rating for ' + contactName; $('#editRatingModalTitle').html(modalTitle); $("#projectContactRecID").val(recID); //hide error/success alerts if previously showing $("#ajaxError1").hide(); $("#ajaxSuccess1").hide(); $("#callContact1").prop("disabled", false); $('#newRating').val(currentRating) // set the current rating console.log(recID); console.log(currentRating); console.log(contactName) }); }); //]]> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" /> <table class="table table-striped table-hover table-bordered"> <tbody> <tr> <td>Click Starts to Edit Rating</td> <td> <a href="#" contactName="Fred Simpson" currentRating="4" data-toggle="modal" data-rec-id="175091" data-target="#editRatingModal"> <div><span class="stars-container stars-80">★★★★★</span></div> </a> </td> </tr> </tbody> </table> <!-- Modal --> <div class="modal fade" id="editRatingModal" tabindex="-1" role="dialog" aria-labelledby="editRatingModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="editRatingModalTitle">Edit Rating</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <form id="editRatingFrom" action="projectDetails.php" method="post" role="form"> <input type="hidden" name="recid" value="16103"> <input type="hidden" name="projectContactRecID" value="" id="projectContactRecID"> <input type="hidden" name="action" value="editRating"> <div class="form-group"> <label for="newRating">Select Rating</label> <div class="input-group col-xs-8"> <select class="form-control" name="newRating" id="newRating"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary">Save Rating</button> </div> </form> </div> </div> </div>