Question

标题听起来很简单，但我认为并非如此。

代码自言自语（运行代码片段并查看其工作方式）

我想做的是：按下#add按钮时，它将创建一个隐藏的输入，其中包含在左栏中移动的选项的选项值。按下删除按钮后，它应该删除该隐藏的输入。

“删除”按钮仅在左列到右边起作用。添加按钮仅在右列到左起作用。

我尝试在#add侦听器上添加另一个事件侦听器（我在代码中注释了我的尝试）

非常感谢您的帮助。谢谢！

$("#add").click(function() {
  value_selec = $("#addselect option:selected")
  if (value_selec.text() != "") {
    valueinc = parseInt($("#tomove").attr("label").match(/\d+/)) + 1;
    $("#tomove").attr("label", "Certificates to set(" + valueinc + ")");

    valueinc = parseInt($("#toexec").attr("label").match(/\d+/)) - 1;
    $("#toexec").attr("label", "All students(" + valueinc + ")");


    // my try of adding the hidden input
    value_selec.appendTo($("#tomove"));
    $("#userselector").append("<input type='hidden'  name='users[]' value='" + value_selec.val() + "'>");
    console.log(user);
    $("#remove").click(function() {
      user.remove();
    });
    
    // the end of my try
  }
});

$("#remove").click(function() {
  value_selec = $("#removeselect option:selected")
  if (value_selec.text() != "") {
    valueinc = parseInt($("#tomove").attr("label").match(/\d+/)) - 1;
    $("#tomove").attr("label", "Certificates to set(" + valueinc + ")");

    valueinc = parseInt($("#toexec").attr("label").match(/\d+/)) + 1;
    $("#toexec").attr("label", "All students(" + valueinc + ")");

    value_selec.appendTo($("#toexec"));
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form autocomplete="off" method="post" accept-charset="utf-8" id="mform1" class="mform">
  <div style="display: none;"><input name="sesskey" type="hidden" value="rT6hKBY91O">
    <input name="_qf__certificatemgr_form" type="hidden" value="1">
  </div>

  <div id="addadmisform">
    <h3 class="main">Bulk Certificate Expire</h3>


    <input type="hidden" name="sesskey" value="rT6hKBY91O">
    <div class="row-fluid user-multiselect" id="yui_3_17_2_1_1561710410385_123">
      <div class="span5">
        <label for="removeselect">Expired List</label>
        <div class="userselector" id="removeselect_wrapper">
          <select name="removeselect" id="removeselect" size="20" class="form-control">
            <optgroup id="tomove" label="Certificates to set(0)">
            </optgroup>
          </select>
          
        </div>

      </div>
      <div class="span2 controls">
        <button id="add" onclick="return false;" title="Add" class="btn btn-default">◄&nbsp;Add</button>
        <button id="remove" onclick="return false;" title="Remove" class="btn btn-default">Remove&nbsp;►</button>
        <input name="main" id="main" type="submit" value="Set Expired" title="Set Expired" class="btn btn-default">
      </div>
      <div class="span5" >
        <label for="addselect">Users</label>
        <div class="userselector" id="addselect_wrapper">
          <select name="addselect" id="addselect" size="20" class="form-control" style="">

            <optgroup id="toexec" label="All Students (2)">
              <option value="2">Admin User (admin, bacilus@yahoo.com)</option>
              <option value="3">Student Test (student, studenttest@mailinator.com)</option>
            </optgroup>
          </select>

        </div>

      </div>
    </div>

  </div>
</form>

按下按钮即可删除动态隐藏输入

0 个答案: