Question

我有两个选择框，左边和右边的框有一些选项，有两个按钮，一个用于从左向右移动选项，另一个用于从右向左移动。我正在面对这些问题。

当我单击“ <<”按钮时，该按钮从右向左复制内容，将调用append方法。选定的项目被添加到左侧，但从右侧被删除。

我希望该项目保留在右侧，并且仍要添加到左侧。

第二个问题是。我用一些选择填充左框架。现在，当我从右到左添加一个项目时，它将检查并且不允许添加（如果已经存在）

右选择框值[A ,, B，C，D，E，F，G，H，I，J，K，L] 左侧选择框的值[D，E，F，G] [预定值]

如果用户尝试在左框架中再次添加现有值，即值D或E等，它将不允许并警告用户

如果用户单击并尝试从左移到右，则将从左移而未附加到右。删除功能称为

但是，如果用户尝试相同的操作，即在左侧框架中添加不存在的条目，例如：L，将允许添加...但是如果再次从左向右移动，它将被删除。

$(function(){

          // button to move elements from right to   left

     $("#btnLeftw").click(function () {
          var selectedItem = $("#rightValues option:selected");
          var selText = selectedItem.val();      


          if ( ($("#leftValues option[value='"+selText+"']").length )<= 0 )
              {

            $("#leftValues").append(selectedItem);  

          else
              {
              alert("Selected Memeber is already added"+($("#leftValues option[value='"+selText+"']").length ));
              }
        }); 


   // button to move elements from left to   right
   $("#btnRightw").click(function () {            
     var selectedItem = $("#leftValues option:selected"); 
     var selText = selectedItem.val();    

            if ( ($("#rightValues option[value='"+selText+"']").length )<= 0 ) // if item not in right select add it
                 {

                 $("#rightValues").append(selectedItem);


              }
         else
              {

                   selectedItem.remove();  // if already exist in right select just remove from left
              }

   });









<section>
 <div>
         <div>
            <input type="text" id="txtLeft" disabled="disabled"  value="myteam"/>
        </div>

        <select id="leftValues" name="leftValues" size="11" multiple>
               <option value="1">D</option>
               <option value="2">C</option>
               <option value="3">E</option>
                <option value="4">F</option>   


</select>

 </div>
  <div c>
    <div> 
         <br>  <br>  <br>
          <input type="button" id="btnLeftw" value="&lt;&lt;" />
         <input type="button" id="btnRightw" value="&gt;&gt;" />

    </div>
    </div>


    <div class="mySECTIONdiv">
        <div>
            <input type="text" id="txtRight" disabled="disabled"  value="Team Master List"/>
        </div>
        <select id="rightValues" name="rightValues" size="10" multiple> 

               <option value="1">A</option>
               <option value="2">B</option>
               <option value="3">C</option>
                <option value="4">D</option>  
               <option value="5">E</option>
               <option value="6">G</option>
               <option value="7">H</option>
                <option value="8">I</option>  
                 <option value="9">J</option> 
                  <option value="10">K</option>          

        </select>        
    </div>
</section>

Answer 1

如果要复制元素，请像.clone()一样使用$("#leftValues").append(selectedItem.clone());。

下面的测试代码。

// button to move elements from right to left
$("#btnLeftw").click(function() {
  var selectedItem = $("#rightValues option:selected");
  var selText = selectedItem.val();
  if (($("#leftValues option[value='" + selText + "']").length) <= 0) {
    $("#leftValues").append(selectedItem.clone());
  } else {
    alert("Selected Memeber is already added" + ($("#leftValues option[value='" + selText + "']").length));
  }
});


// button to move elements from left to right
$("#btnRightw").click(function() {
  var selectedItem = $("#leftValues option:selected");
  var selText = selectedItem.val();
  if (($("#rightValues option[value='" + selText + "']").length) <= 0) // if item not in right select add it
  {
    $("#rightValues").append(selectedItem);
  } else {
    selectedItem.remove(); // if already exist in right select just remove from left
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<section>
  <div>
    <div>
      <input type="text" id="txtLeft" disabled="disabled" value="myteam" />
    </div>

    <select id="leftValues" name="leftValues" size="11" multiple>
      <option value="4">D</option>
      <option value="3">C</option>
      <option value="5">E</option>
      <option value="6">F</option>
    </select>

  </div>
  <div c>
    <div>
      <br> <br> <br>
      <input type="button" id="btnLeftw" value="&lt;&lt;" />
      <input type="button" id="btnRightw" value="&gt;&gt;" />

    </div>
  </div>


  <div class="mySECTIONdiv">
    <div>
      <input type="text" id="txtRight" disabled="disabled" value="Team Master List" />
    </div>
    <select id="rightValues" name="rightValues" size="10" multiple>

      <option value="1">A</option>
      <option value="2">B</option>
      <option value="3">C</option>
      <option value="4">D</option>
      <option value="5">E</option>
      <option value="7">G</option>
      <option value="8">H</option>
      <option value="9">I</option>
      <option value="10">J</option>
      <option value="11">K</option>

    </select>
  </div>
</section>

多选框选择列表问题

1 个答案: