Question

下面是我的HTML代码，我必须添加jquery这个怎么做？

    <div class="container">
<div class="row one">
    <h4>Staff Re-Admission</h4>
</div><br>
<div class="row">
    <p>Academic Year</p>
    <select>
        <option>2010/2011</option>
        <option>2010/2011</option>
        <option>2010/2011</option>
    </select>
</div><br>
<div class="row">
<div class="container">
  <div class="row">
  <div class="col-md-12">
  <div class="table-responsive">
    <table class="table" style="width: 100%;">        
        <tbody>
        <tr>
          <td style="width: 250px"><p>Staff List</p></td>
          <td></td>
          <td><p>Continue</p></td>
          <td><p>Discontinue</p></td>
        </tr>
        <tr>
          <td><select size="14" class="Staff" multiple="multiple">
            <option value="SJB2017NT021">SJB2017NT021--Vishu</option>
            <option value="SJB2017NT022">SJB2017NT022--Naveen</option>
            <option value="SJB2017NT023">SJB2017NT023--Uday</option>
            <option value="SJB2017NT024">SJB2017NT024--Mohan</option>
            <option value="SJB2017TS019">SJB2017TS019--Thejaswini</option>
            <option value="SJB2017TS020">SJB2017TS020--Prasad</option>
          </select></td>
          <td>
            <button type="submit"  value="" id="Continue">Continue >>
            </button><br><br>
            <button type="submit"  value="" id="Discontinue">Discontinue >>
            </button><br><br>
            <button type="submit" value="" id="Back">Back To List 
            <<</button>
          </td>
          <td><select size="14" multiple="multiple" class="Staff" ></select>
          </td>
          <td><select size="14" multiple="multiple" class="Staff" ></select>
          </td>
        <tr>
          <td><button type="submit">submit</button>
          <button type="submit">submit</button>
          </td> 
        </tr>         
        </tr>            
      </tbody>          
    </table>
  </div><!--end of .table-responsive-->
  </div>
  </div>
</div>                       
</div>
</div>

当我选择并单击继续时，它必须在继续框中列出，如果我选择停止然后在停止框中，如果我选择返回整个东西必须回来怎么做，请帮助我。

Answer 1

为每个按钮制作2个方法，然后点击每个移动项目到特定的框...

在后退按钮上单击该框中的所有项目（继续和停止）并将其添加到<select>后面.. 同时清除两个方框......

Answer 2

只需使用continue更改另外两个id的id并停止

<td>
    <select size="14" multiple="multiple" class="continue" ></select>
</td>
<td>
    <select size="14" multiple="multiple" class="discontinue" ></select>
</td>

这是jquery for add to continue和discontinue。

<script>
    $("#Continue").on("click", function(){
        var cont = $(".Staff").val();
        $(".continue").append($(".Staff option:selected"));
        $(".Staff option:selected").remove();
        return false;
    });
    $("#Discontinue").on("click", function(){
        var cont = $(".Staff").val();
        $(".discontinue").append($(".Staff option:selected"));
        $(".Staff option:selected").remove();
        return false;
    });
</script>

如何列出所选选项并使用jQuery删除所选选项？

2 个答案: