拖拽含表单的卡片时，修改select值提交后未生效的问题求助

我在实现拖拽功能：移动包含表单的卡片时，修改select控件的取值并提交表单，希望通过状态字段让卡片永久停留在新位置。目前能成功获取元素、表单及select控件，也能修改select的值，但提交表单后，这个值并未实际变更。

JavaScript部分 #

function allowDrop(ev) {
  ev.preventDefault();
}  

function drag(ev) {
  ev.dataTransfer.setData("text/html", ev.target.id);
}  

function drop(ev) {  
  ev.preventDefault();  
  var data = ev.dataTransfer.getData("text/html");  
  ev.target.appendChild(document.getElementById(data));
  var taskCardModal = document.getElementById(data);
  var taskForm = taskCardModal.getElementsByTagName("form")[0];
  var selectState = taskForm.getElementsByTagName("select")[0];
  //alert(selectState.value);
  selectState.value="todo";
  //alert(selectState.value);
  document.forms[taskForm.id].submit();
  //alert(selectState.value);
}  

HTML部分 #

<div class="card-body" id="divtesting" style="min-height: 200PX;" ondrop="drop(event)" ondragover="allowDrop(event)">
  ...
  <div class="card" style="width: 15rem; font-size:13px" id="pagina-di-visualizzazione-delle-informazioni-del-profilo"
    draggable="true" ondragstart="drag(event)">
    <div class="card-body">
      ...
      <!-- Modal body edit-->
      <div class="modal fade" id="pagina-di-visualizzazione-delle-informazioni-del-profiloedit" tabindex="-1"
        role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        ....
        <div class="modal-body">
          <form id="cred_form_144_1_1" class="cred-form cred-keep-original"
            action="/wpscrum/index.php/sprintboard/sprint-1-backlog-novel/?projectid=276&amp;sprintid=275&amp;_tt=1696883457"
            data-form="{"form_id":"cred_form_144_1_1","use_ajax":"0","wpv_page":1}"
            data-conditionals="&#091;&#093;" method="post">
            ....
            <select id="cred_form_144_1_1_state" class="form-control wpt-form-select form-select select"
              output="bootstrap" preset_value="" urlparam="" preview="" previewsize="" select_label="" edit_label=""
              value_escape="" make_readonly="" placeholder="" select_text="" data-wpt-type="select" name="wpcf-state">
              <option value="todo" class="wpt-form-option form-option option" data-wpt-type="option"
                data-wpt-id="cred_form_144_1_1_cred_form_144_1_1_state" data-wpt-name="wpcf-state">To do</option>
              <option value="working" class="wpt-form-option form-option option" data-wpt-type="option"
                data-wpt-id="cred_form_144_1_1_cred_form_144_1_1_state" data-wpt-name="wpcf-state">Working</option>
              <option value="testing" class="wpt-form-option form-option option" data-wpt-type="option"
                data-wpt-id="cred_form_144_1_1_cred_form_144_1_1_state" data-wpt-name="wpcf-state" selected="selected">
                Testing
              </option>
              <option value="done" class="wpt-form-option form-option option" data-wpt-type="option"
                data-wpt-id="cred_form_144_1_1_cred_form_144_1_1_state" data-wpt-name="wpcf-state">Done</option>
            </select>
            ...
          </form>
          ...
</div>

1. 触发select的change事件 #

你使用的是Cred Form这类框架，直接修改select.value后，框架可能没有感知到值的变化，导致提交时还是用原始值。需要手动触发change事件：

selectState.value = "todo";
// 触发change事件，通知框架值已更新
selectState.dispatchEvent(new Event('change', { bubbles: true }));

2. 直接调用form元素的submit方法 #

避免通过document.forms[taskForm.id]获取表单，直接用获取到的taskForm对象提交：

// 替换原来的document.forms[taskForm.id].submit();
taskForm.submit();

修改后的完整drop函数 #

function drop(ev) {  
  ev.preventDefault();  
  var data = ev.dataTransfer.getData("text/html");  
  ev.target.appendChild(document.getElementById(data));
  var taskCardModal = document.getElementById(data);
  var taskForm = taskCardModal.getElementsByTagName("form")[0];
  var selectState = taskForm.getElementsByTagName("select")[0];
  
  selectState.value = "todo";
  // 触发change事件
  selectState.dispatchEvent(new Event('change', { bubbles: true }));
  // 直接提交表单
  taskForm.submit();
}  

额外排查点 #

• 打开浏览器开发者工具（F12），查看网络面板，检查表单提交的请求中，wpcf-state参数是否为todo，确认前端是否正确传递了值
• 检查后端接口是否正确接收并处理了wpcf-state参数，是否有逻辑覆盖了提交的值
• 确认表单没有其他JS验证或拦截逻辑阻止了提交，或重置了select的值

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