javascript - Jquery 从一个盒子移动到另一个盒子

Question

尽管它在 JSFiddle 中工作，但我正在努力让一些代码在我的网站上工作。

我在正文中有这个脚本。

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script>
$('.add').click(function(){
$('#first option:selected').appendTo('#second');
});
$('.remove').click(function(){
$('#second option:selected').appendTo('#first');
});
$('.add-all').click(function(){
$('#first option').appendTo('#second');
});
$('.remove-all').click(function(){
$('#second option').appendTo('#first');
});
</script>

我有这个来执行脚本。

    <div id="input14">
    <select id="first" multiple="true">
        <option value="something@something.com"> test </option>
        <option value="something@something.com"> something@something.com </option>
        <option value="something@something.com"> something@something.com </option>
        <option value="something@something.com"> something@something.com </option>
        <option value="something@something.com"> something@something.com </option>
    </select>
    </div>

    <div id="button14">



        <center>
        <br />
        <button class='add'> > </button><br />
        <button class='remove'> < </button><br />
        <button class='add-all'> >>> </button><br />
        <button class='remove-all'> <<< </button>
        </center>
    </div>

    <div id="error14">

        <select id="second" multiple="true">

        </select>



    </div>

正如我所说，它适用于 JSFiddle 但不适用于我的本地主机，这里是 JSFiddle 设置http://jsfiddle.net/8nezD/1/

请有人告诉我我的方式的错误！

谢谢

Answer 1

将您的 jQuery 包装在文档就绪调用中

$(document).ready(function () {
    $('.add').click(function () {
        $('#first option:selected').appendTo('#second');
    });
    $('.remove').click(function () {
        $('#second option:selected').appendTo('#first');
    });
    $('.add-all').click(function () {
        $('#first option').appendTo('#second');
    });
    $('.remove-all').click(function () {
        $('#second option').appendTo('#first');
    });
});

它在 jsFiddle 上运行的原因是该站点会自动为您包装它。