动态设置“已选择”＆＃39; Bootstrap Modal中选择列表的属性

Question

我有一个Bootstrap模式，由一个链接触发，该链接传递了许多参数，这些参数显示一个选择列表供用户选择1到5之间的等级。这部分工作正常，但我现在需要有选择菜单显示当前评级的值，而不是默认为1，这是列表中的第一个值。

这是我的代码：

＆＃13;

＆＃13;

$(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)
  });
}); //]]>

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

currentRating变量包含我要在选择列表中添加selected属性的值，但不确定如何实现此目的？

Answer 1

您只需将值设置为#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>