如何将jQuery变量传递给Bootstrap模态框的下拉选择器

嘿，我来帮你搞定这个模态框传值的问题！其实思路很清晰，我们分几步来解决：

第一步：用Twig全局变量渲染模态框的下拉选项 #

你已经有存储所有分类的Twig全局变量，直接在Bootstrap模态框的<select>里循环生成选项就行，服务器端会把所有分类渲染到页面上：

<!-- 编辑文章的Bootstrap模态框 -->
<div class="modal fade" id="editArticleModal" tabindex="-1" aria-labelledby="editArticleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editArticleModalLabel">编辑文章</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- 分类下拉选择器 -->
        <div class="mb-3">
          <label for="articleCategory" class="form-label">文章分类</label>
          <select class="form-select" id="articleCategory">
            {% for category in global.categories %}
              <option value="{{ category.id }}">{{ category.name }}</option>
            {% endfor %}
          </select>
        </div>
        <!-- 其他编辑字段（标题、内容等）这里省略 -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">保存修改</button>
      </div>
    </div>
  </div>
</div>

第二步：在编辑按钮上存储当前文章的分类ID #

在文章列表里，给每个编辑按钮加上data-*属性来存储当前文章的分类ID，这样jQuery能轻松获取到这个值：

<!-- 文章列表中的编辑按钮 -->
<button class="edit-article-btn btn btn-sm btn-primary" 
        data-article-id="{{ article.id }}" 
        data-category-id="{{ article.category_id }}">
  编辑文章
</button>

第三步：用jQuery传递变量并设置下拉选中项 #

接下来写JavaScript逻辑，点击编辑按钮时，先拿到当前文章的分类ID，把这个值赋值给模态框的下拉选择器，最后打开模态框：

// 监听编辑按钮点击事件
$('.edit-article-btn').on('click', function() {
  // 获取当前文章的分类ID（这就是你要传递的变量）
  const currentCategoryId = $(this).data('category-id');
  
  // 设置模态框下拉选择器的选中项
  $('#articleCategory').val(currentCategoryId);
  
  // 初始化并打开Bootstrap模态框
  const editModal = new bootstrap.Modal(document.getElementById('editArticleModal'));
  editModal.show();
});

额外小提示 #

• 如果有些文章还没设置分类（category_id为null或0），可以加个判断默认选中第一个分类：

  if (currentCategoryId) {
    $('#articleCategory').val(currentCategoryId);
  } else {
    $('#articleCategory').val($('#articleCategory option:first').val());
  }
  

• 确保引入顺序正确：先加载jQuery，再加载Bootstrap的JS文件，不然模态框可能无法正常工作。

这样就能实现点击编辑按钮后，模态框的下拉选择器自动选中当前文章的分类啦！

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