Question

我想将一个选项从一个选项移动到另一个选项。这是我到目前为止所做的。

selects.html

 <select multiple id="select1" class="Multiple">
    <option>foo</option>
    <option>bar</option>
</select>

<section id="botons" class="botons">
    <input type="button" id="bAdd" value=">>">
    <input type="button" id="bDel" value="<<">            
</section>

<select multiple id="select2" class="Multiple">
        <option> </option>
</select>

AJAX / JS

$(document).on("ready",function(){
    $("#bAdd").on("click", function(){
        var option=$("#select1 option:selected").value();
        $("#select2").add($('<option></option>').value(option));
        $("#select option:selected").remove();
    });
});

Answer 1

试试这个：您的第一个选择框ID为select1。尝试将其附加到select2。而且jquery中的函数是val()而不是value()。

$(document).ready(function() {
    $("#bAdd").on("click", function(){
        var option=$("#select1 option:selected").val();
        $("#select2").append('<option>'+option+'</option>');
        $("#select1 option:selected").remove();
});
	});//submit click

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

 <select multiple id="select1" class="Multiple">
    <option>foo</option>
    <option>bar</option>
</select>

<section id="botons" class="botons">
    <input type="button" id="bAdd" value=">>">
    <input type="button" id="bDel" value="<<">            
</section>

<select multiple id="select2" class="Multiple">
        <option> </option>
</select>

Answer 2

在第

行

var option=$("#select option:selected").value();

您指的是ID为select的select，但在您的HTML中，您为其指定了select1的ID。

Answer 3

您需要获取所选选项的文本，因为您没有为它们设置值。

 $("#bAdd").on("click", function(){
            var option=$("#select1 option:selected").text();
            $("#select2").append($('<option>'+option+'</option>'));
            $("#select1 option:selected").remove();
    });

Answer 4

您可以使用jquery .clone()复制所选元素：

＆＃13;

$("#bAdd").on("click", function() {
  var option = $("#select1 option:selected").clone();
  $("#select2").append(option);
  $("#select1 option:selected").remove();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1" class="Multiple" multiple>
  <option>foo</option>
  <option>bar</option>
</select>
<section id="botons" class="botons">
  <input type="button" id="bAdd" value=">>" />
  <input type="button" id="bDel" value="<<" />
</section>
<select id="select2" class="Multiple" multiple>
</select>

＆＃13;

<强>参考文献：

.append()

使用Ajax在选择之间移动选项

4 个答案: