1

我的 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 似乎是正确的解决方案。任何人都可以帮忙。请

4

2 回答 2

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()还不起作用。onchangeselect

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

于 2012-09-19T11:34:22.640 回答
0

我认为您应该使用clone()（区分大小写），使用 id hash #并使用正确的对象进行替换。（您将克隆的对象保存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);
}
于 2012-09-19T11:37:06.247 回答