Question

我的html页面中有一个下拉框，我需要将下拉列表重置回原始状态。我的代码段如下：

<div id="countries" >
 <!---------------I select a particular module----------------->
     <select id="modules" onchange = "getRole()"> <!--Function getRole() called here-->
                <option>---Select---</option>
                <option value="1">Module1</option>
                <option value="2">Module2</option>
                <option value="3">Module3</option>
                <option value="4">Module4</option>
        </select>
  <!-Based on the modules some processing is done and countries are displayed->
     <select multiple="multiple" id="country" name="country[]">

            <option value="1">India</option>
            <option value="2">USA</option>
            <option value="3">Russia</option>

       </select> 
</div>

我需要在进行一些处理后重置下拉菜单

换句话说，我需要在使用我的下拉菜单完成所有处理后恢复原始状态。

我正在使用.clone（），但这似乎不起作用。

function getRole() {
    //CLone the id 'countries'
    var cloneobj = $('#countries').clone();

    //Some processing here
    ....

    //After processing get back the original state
    $('#countries').replaceWith(cloneObj);
}

这里的问题是克隆正在创建重复的id，因此dosent似乎是正确的解决方案。谁能帮忙。请

Answer 1

首先，为id

提供#

var cloneobj = $('#countries').clone();

并尝试

$('#countries').replaceWith(cloneObj);

Javascript对函数区分大小写!!!

clone()与Clone() 不同。

更新2

我抓住了你：你错过了</select>标签和评论问题

<div id="countries" >
 <!---------------I select a particular module----------------->
     <select id="modules" onchange = "getRole()"> <!--Function getRole() called here-->
                <option>---Select---</option>
                <option value="1">Module1</option>
                <option value="2">Module2</option>
                <option value="3">Module3</option>
                <option value="4">Module4</option>

     </select> <!-- Here you forgot -->

  <!--Based on the modules some processing is done and countries are displayed !. You forgot one `-` -->
     <select multiple="multiple" id="country" name="country[]">

            <option value="1">India</option>
            <option value="2">USA</option>
            <option value="3">Russia</option>

       </select> 
</div>

更新3

使用jquery事件查看我的示例：http://jsfiddle.net/6WLVC/

但是，我不知道为什么getRole()在onchange标记中使用select事件仍无效。

似乎jQuery函数仅在$(function(){ ... });初始化中起作用。

Answer 2

我认为您应该使用clone()（区分大小写），使用ID哈希 #，并使用正确的对象做替换。（您将克隆的对象保存在cloneobj中并使用未定义的cloneObj替换（区分大小写！）

克隆选项并替换如下：

function getRole() {
    //Clone the id 'countries'
    var clonedObj = $('#countries').clone();

    //Some processing here
    ....

    //After processing get back the original state
    $('countries').replaceWith(clonedObj);
}

如何在jquery中重置div标签

2 个答案: