jQuery追加：将选项移动到选择列表底部的通用方法

我有一个包含几十页的表单。在所有页面中，我需要使用jQuery将选择列表中的特定选项移动到列表底部。jQuery追加：将选项移动到选择列表底部的通用方法

当我有一个选择的页面上，这个工作得很好：

$('select').find('option[value="optionZ"]').appendTo('select');

的问题是，当我有一个以上的选择，在optionZ值追加到每个列表多次。

 <select name="select1"> 
      <option value="optionA">option A</option> 
      <option value="optionZ">option Z</option> 
      <option value="optionB">option B</option> 
      <option value="optionC">option C</option> 
     </select> 

     <select name="select2"> 
      <option value="optionA">option D</option> 
      <option value="optionZ">option Z</option> 
      <option value="optionB">option E</option> 
      <option value="optionC">option F</option> 
     </select>

我已经能够解决这个问题的唯一方法是通过名称定位：

$('select[name=select1]').find('option[value="optionZ"]').appendTo('select[name=select1]');  

$('select[name=select2]').find('option[value="optionZ"]').appendTo('select[name=select2]');

我没有引用可维护性元素每次的名称寻找这样的一个通用的方法目的。基本上“如果选项Z存在于此选择列表中，请将其附加到此选择列表中”。有任何想法吗？

来源

2017-06-05 user1392897

你只需要你的select和option选择相结合，并追加到父：

$('select option[value = "optionZ"]').each(function() { 
 
    var $opt = $(this); 
 
    $opt.appendTo($opt.parent()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
     
 
     <select name="select1"> 
 
      <option value="optionA">option A</option> 
 
      <option value="optionZ">option Z</option> 
 
      <option value="optionB">option B</option> 
 
      <option value="optionC">option C</option> 
 
     </select> 
 

 
     <select name="select2"> 
 
      <option value="optionA">option D</option> 
 
      <option value="optionZ">option Z</option> 
 
      <option value="optionB">option E</option> 
 
      <option value="optionC">option F</option> 
 
     </select>

来源

2017-06-05 16:22:01

这正是我正在寻找，谢谢！ – user1392897

我不完全确定这是否是您想要的，但您可以通过将一个按钮和<select>元素放在包含div中，将所选选项移动到列表的底部。

然后，您可以使用.siblings（）和.children（）函数来查找选定的选项并将其追加到最后。

<div id="select1"> 
    <select name="select1"> 
    <option value="optionA">option A</option> 
    <option value="optionZ">option Z</option> 
    <option value="optionB">option B</option> 
    <option value="optionC">option C</option> 
    </select> 
    <button> 
    Move to Bottom 
    </button> 
</div> 

$("button").click(function() { 
    var thisSelect = $(this).siblings("select"); 
    var selected = thisSelect.children(":selected"); 
    thisSelect.append(selected); 
});

小提琴链接：https://jsfiddle.net/pjpwea/8fhtu5sa/1/

来源

2017-06-05 16:18:48

你可以尝试使用this关键字来参考目前使用的选择。假设你使用change事件处理程序，它会是这个样子：

$('select').on('change',function(){ 
    $(this).find("option:selected").appendTo(this); 
});

小提琴：https://jsfiddle.net/3tphmqvv/

来源

2017-06-05 16:19:11 Ezenhis

jQuery追加：将选项移动到选择列表底部的通用方法

回答

相关问题