时间戳

首页 > 解决方案 > 在 Bootstrap Modal 中动态设置 Select 列表的 'selected' 属性

javascript - 在 Bootstrap Modal 中动态设置 Select 列表的 'selected' 属性

问题描述

我有一个引导模式，它由一个链接触发，该链接传入许多参数，该参数显示一个选择列表，供用户选择 1 到 5 之间的评级。这部分运行良好，但我现在需要显示选择菜单当前评级的值，而不是默认为 1，这是列表中的第一个值。

这是我的代码：

$(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">★★★★★&lt;/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>

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

标签： javascriptjqueryhtmlbootstrap-4

解决方案

您可以简单地将值设置为#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">★★★★★&lt;/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>

推荐阅读