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中有效但在我的localhost上无效，这里是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的原因是因为该网站会自动为您包装它。

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

1 个答案: