javascript - 使用 Jquery 提交模式时更改元素

Question

当我提交通过单击标记事件打开的模式时，我正在尝试更改元素的文本和值，但我仍然不知道该怎么做。下图描述了我的想法。

我尝试删除并替换 html，但它不起作用，我仍然卡住。

太感谢了。

这是我的代码：

<div class="report-filter-selector">
  <span class="badge rounded-pill bg-info">
    <a
      class="openEditModalBtn"
      data-toggle="modal"
      data-field="form_name"
      data-value="request_all"
      href="#editFilterSelectorModal"
    >form name: request_all</a>&nbsp;
    <button
      class="selector-control-btn" id="selector-control-btn"
    ><i class="fas fa-times"></i>
    </button>
  </span>
  <input type="hidden" name="form_name" value="request_all">
</div>

<!-- edit filter selector modal -->
<div class="modal fade" id="editFilterSelectorModal" data-backdrop="static"
     tabindex="-1" aria-labelledby="editFilterSelectorModalLabel"
     aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Edit condition </h5>
        <button type="button" class="close" data-dismiss="modal"
                aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="add_body">
        <div class="message-content" name="error" id="add_err"></div>
        <div class="form-group">
          <label for="recipient-name" class="col-form-label">Condition:</label>
          <select name="edit_field_selector" id="edit_field_selector"
                  onchange="loadValueByCondition();" disabled>
            <option value="form_name">form_name</option>
            <option value="prefecture">prefecture</option>
            <option value="time">Time</option>
          </select>
        </div>
        <div class="form-group">
          <label for="message-text" class="col-form-label">Value:</label>
          <div id="edit_value_by_selector" class="edit_value_by_selector"></div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary"
                id="edit-filter-selector-submit"
                name="edit-filter-selector-submit">保存
        </button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal"
                id="close-new-form">閉じる
        </button>
      </div>
    </div>
  </div>
</div>

由于我的错，我忘记上传 Javascript 代码，这是我创建元素并在模态编辑提交后尝试更改的代码。

//this code create <a> element like number 1 in picture 
$('#add-filter-selector-submit').click(function(e){
    
    let condition = $('#add_field_selector').val();
    let val = "example1";
    
    let html   = '<td><div class="report-filter-selector">';
        html  += '<span class="badge rounded-pill bg-info"><a class="openEditModalBtn" data-toggle="modal" data-field="'+condition+'" data-value="'+val+'" href="#editFilterSelectorModal">'+condition+':'+val+'</a>&nbsp;<button class="delete-selector-control-btn" id="delete-selector-control-btn"><i class="fas fa-times"></i></button></span>';
        html  += '<input type="hidden" name="'+condition+'" value="'+val+'">';
        html  += '</div></td>';

    $("#filter_conditions_table tr:first").append(html);
});

//this code try to change element when submit edit modal:
$('#edit-filter-selector-submit').click(function(e){
    // I dont know how to do next
});

标签： javascripthtmljquery

Answer 1

我不得不假设您的第二个选择是使用与示例 HTML 中的第一个类似的命名约定创建的。您可以使用下面的代码

1. 选择一个按钮（替换#edit-filter-selector-submit“）并在单击时运行一个函数
2. 更改selectusing的值.val()- 您需要传递要切换到的值

---

// Add event listener to the button
$("#edit-filter-selector-submit").click(function() {

   // Change the value of the select item   $("#edit_value_selector").val("2");

});

---

// Add event listener to the button
$("#edit-filter-selector-submit").click(function() {

  // Change the value of the select item
  $("#edit_value_selector").val("2");

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="report-filter-selector">
  <span class="badge rounded-pill bg-info">
    <a
      class="openEditModalBtn"
      data-toggle="modal"
      data-field="form_name"
      data-value="request_all"
      href="#editFilterSelectorModal"
    >form name: request_all</a>&nbsp;
    <button
      class="selector-control-btn" id="selector-control-btn"
    ><i class="fas fa-times"></i>
    </button>
  </span>
  <input type="hidden" name="form_name" value="request_all">
</div>

<!-- edit filter selector modal -->
<div class="modal fade" id="editFilterSelectorModal" data-backdrop="static" tabindex="-1" aria-labelledby="editFilterSelectorModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Edit condition </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="add_body">
        <div class="message-content" name="error" id="add_err"></div>
        <div class="form-group">
          <label for="recipient-name" class="col-form-label">Condition:</label>
          <select name="edit_field_selector" id="edit_field_selector" onchange="loadValueByCondition();" disabled>
            <option value="form_name">form_name</option>
            <option value="prefecture">prefecture</option>
            <option value="time">Time</option>
          </select>
        </div>
        <div class="form-group">
          <label for="message-text" class="col-form-label">Value:</label>
          <div id="edit_value_by_selector" class="edit_value_by_selector">
          <select name="edit_value_selector" id="edit_value_selector" onchange="loadValueByCondition();" disabled>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="edit-filter-selector-submit" name="edit-filter-selector-submit">Change
        </button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal" id="close-new-form">Close
        </button>
      </div>
    </div>
  </div>
</div>