Question

我对jQuery了解不多，但我发现a useful snippet我希望将其纳入我的代码中。

我尝试了以下内容：

<form>
    <fieldset>
        <legend>Kies je activiteiten</legend>
        <select id="tenemen" class="chosen-select" multiple style="width:350px;" multiple>
            {% for activiteit in activiteiten %} 
            <option value="{{activiteit.id}}" selected>{{activiteit.name}}</option>
            {% endfor %}
        </select>
        <select id="telaten" class="chosen-select" multiple style="width:350px;" multiple>
        </select>
    </fieldset> 
</form>
<script>
$('#tenemen').change(function(){
$('#telaten').html(''); //Clear
$('#tenemen option:not(:selected)')
.clone()
.appendTo('#telaten')
})
</script>

{%%}标签是Jinja的标签，但这不重要。

我已经在a JSFiddle中尝试了它，并且它有效，所以我不明白为什么它在我的模板中不起作用。 jQuery在基本模板中加载如下：<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>

我真的不熟悉jQuery，所以它可能是非常愚蠢的东西。任何帮助表示赞赏。

Answer 1

你需要等到文件准备就绪......

$(function(){
   $('#tenemen').change(function(){
     $('#telaten').html(''); //Clear
     $('#tenemen option:not(:selected)')
     .clone()
     .appendTo('#telaten')
   })
})

它在jsfiddle中工作的原因是jsfiddle自动激活你的代码“onload”。当您将代码嵌入到真正的html文件中时，您需要告诉浏览器它必须等待，直到文件加载为止。

jQuery片段无法正常工作

1 个答案: