Question

我正在使用选择的原型。我想根据第一个选择框更新第二个选择框。这该怎么做？我可以启动onchange事件，但我无法根据第一个选择框中的onchange事件更新第二个选择框。

<select class="chzn-select" id="one">
    <option>one</option>
    <option>two</option>
    <option>three</option>
</select>
<select class="chzn-select" id="two">
    </select>


$$('#one').each(function(select) {
    new Chosen(select);
})
.invoke('observe', 'change', function() {
     alert(document.getElementById("one").value);

    //update the second select here


});
$$('#two').each(function(select) {
    new Chosen(select);
})
.invoke('observe', 'change', function() {
    alert(document.getElementById("two").value);
});

Answer 1

以下是基于DOM的示例更新代码：

// get value of #one
var v = document.getElementById("one").value;

// get select #two
var sel = document.getElementById("two");

// remove all options
while (sel.childNodes.length > 0) {
    sel.removeChild(sel.childNodes[0]);
}

// add 2 new options
var o1 = document.createElement('option');
o1.innerHTML = v + '-one';
sel.appendChild(o1);

var o2 = document.createElement('option');
o2.innerHTML = v + '-two';
sel.appendChild(o2);

// update chosen
Event.fire($("two"), "liszt:updated");

如何根据所选原型javascript中的第一个选择框更新第二个选择？

1 个答案: