如何在Bootstrap模态框中动态设置下拉选择框的selected属性

嘿，我来帮你搞定这个下拉框默认选中当前评分的问题！

解决思路 #

核心就是从触发模态框的链接里拿到当前评分值，然后在模态框弹出时把这个值设置给下拉列表，替换掉默认的第一个选项。

具体步骤 #

1. 给触发链接添加评分数据属性
   先确保触发模态框的链接里存储了当前评分，比如加个data-rating属性，把当前评分值放进去：

   <a href="#" data-toggle="modal" data-target="#editRatingModal" data-rec-id="你的记录ID" data-rating="3">修改评分</a>
   

   这里的data-rating="3"就是当前的评分值，根据实际数据动态生成就行。

2. 修改模态框弹出事件的代码
   在你现有的show.bs.modal事件处理里，添加获取评分并设置下拉选中的逻辑：

   $(document).ready(function() {
     $('#editRatingModal').on('show.bs.modal', function(e) {
       // 你原来获取记录ID的代码
       const recID = $(e.relatedTarget).data('rec-id');
       // 新增：获取当前评分值
       const currentRating = $(e.relatedTarget).data('rating');
       
       // 找到模态框里的下拉列表，设置选中当前评分
       // 注意：把#ratingSelect换成你实际的下拉框ID
       $('#ratingSelect').val(currentRating || 1);
       
       // 你原来的其他代码，比如处理clickedlink
       clickedlink = e.relatedTarget;
     });
   });
   

3. 确保下拉选项的value匹配
   检查模态框里的下拉列表，option的value要和你传入的评分值一致，比如：

   <select id="ratingSelect" class="form-control">
     <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>
   

这样设置后，当你点击链接弹出模态框时，下拉列表就会自动选中当前的评分值啦；如果没获取到评分值，会默认选中1分，容错性也拉满~

内容的提问来源于stack exchange，提问作者user982124