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上運行的原因是因為該網站會自動為您包裝它。