сброс выпадающего списка до оригинала после его загрузки

Question

<select id="ddl" name="ddl"> 
    <option value="Col">loading</option> 
</select> 
<select id="ddlCol" name="ddlCol"> 
    <option value="Col">loading</option> 
</select> 
<select id="ddlCol2" name="ddlCol"> 
    <option value="Col">loading</option> 
</select> 
$("#ddl").change(function(){ 
    $("#ddlcol").load(Test1.html); 
}); 
$("#ddlcol").change(function(){ 
    $("#ddlcol2").load(Test2.html); 
}); 

Теперь у меня есть 3 раскрывающихся списка. когда мой первый раскрывающийся список выберите dll раздел. ddlCol будет нагрузка с test1.html после моего ddlCol выбрать значение ddlcol2 загрузит с test2.html

Что я хочу знать, если я выбираю первый выпадающий список, как сбросить ddlcol2 значение по умолчанию? пример

DDL

Яблоко

Orange

груша

ddlCol

$ 1

$ 2

$ 3

ddlCol2

Красный

Зеленый

Фиолетовый

Выбор компании Apple.

изменение ddlCol

$ 1

$ 1,50

$ 2

Выберите $ 1

ddlCol2 изменения

Синий

Розовый

Теперь выберите Груша

мой ddlCol2 сбросит назад

Красный

Зеленый

Фиолетовый

. как я его сброшу?

Answer 1

var refreshColThenCol2 = function(){ 
    $("#ddlCol1").html($("#ddl2").html()); 
}; 

я думаю загрузка т этот путь намного лучше

Answer 2

Вам необходимо активировать их соответственно, когда их необходимо перезагрузить.

var refreshColThenCol2 = function(){ 
    $("#ddlcol").load(url, refreshCol2); 
}; 

var refreshCol2 = function(){ 
    $("#ddlcol2").load(url); 
}; 

$("#ddl").change(refreshColThenCol2); 
$("#ddlcol").change(refreshCol2);