首页 > 解决方案 > 将 jquery 变量传递给引导模式选择

问题描述

首先,我想让你知道我是一个初学者,(请善待)我首先搜索了一个解决方案但找不到。我正在尝试使用 php mvc 框架构建博客。在这一刻,当我想编辑一篇文章时,我正在重定向到一个新页面并在那里完成工作,但我想切换到 jquery(或 javascript)并且我坚持从选择中选择文章类别菜单。我有一个包含所有类别的树枝全局变量(用于导航)。到目前为止,这是我的代码:JS:

$('#editModal').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget)
      var title = button.data('title')
      var category = button.data('category')
      var body = button.data('body')
      var modal = $(this)
      modal.find('#title').val(title)
      modal.find('#article-id').val(button.data('id'))
      modal.find('#category').val(category)
      modal.find('#body').val(body)
    });

模态:

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Changed your mind? Paste your thoughts!</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form class="form" method="post" action="/adminzone/articles/update" id="formEditArticle">
        <div class="modal-body">
            <input id="article-id" name="id" type="hidden" value={{article.id}} />
            <div class="form-group">
                <label for="title">Title</label>
                <input id="title" class="form-control" name="title" placeholder="Title" value="{{ article.title }}" autofocus required pattern=".{2,80}" title="The title must have at least 2 characters and maximim 80."/>
            </div>
            <div class="form-group">
                <label for="category">Category</label>
                <select id="category" class="form-control" name="category" required>
                    {% for category in categories %}
                    <option value="{{ category.id }}" {% if category.id == article.category %} selected="selected" {% endif %}>{{ category.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label for="body">Body</label>
                <textarea id="body" class="form-control" name="body" placeholder="Paste here your ideas..." required minlength="20"  rows=10>{{ article.body }}</textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-lg btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-lg btn-primary mr-5"><i class="fa fa-lg fa-save"></i> Spreat the word!</button>
            </div>
        </div>
    </form>
    </div>
  </div>
</div>

按钮:

<a href="" class="btn btn-warning fa fa-lg fa-edit" data-toggle="modal" data-target="#editModal" data-id="{{article.id}}" data-title ="{{article.title}}" data-category="{{article.category}}" data-body="{{article.body}}" data-tooltip="tooltip" title="Edit"></a>

标签: phpjquerytwigbootstrap-4

解决方案


推荐阅读