javascript - 隐藏选择下拉列表的元素

Question

我有 2 个选择下拉列表，每个下拉列表都有一堆元素(下面只是一个示例)。

<select id="one">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

<select id="two">>
<option>2</option>
<option>4</option>
<option>6</option>
<option>8</option>
</select> 

当选择第一个下拉列表元素时，如何在第二个下拉列表中添加一些选项。 (例如，如果在下拉列表#1中选择1，则应在下拉列表#2中隐藏1+2=2选项，如果在#1中选择2，则应在#2中隐藏2+2=(4) .等等

我想我需要用这样的方法来处理它:

        document.getElementById("one").onchange = function( ){
            var selectedOption = document.getElementById("one").options[document.getElementById("one").selectedIndex].text; 
        }

接下来我应该做什么？

Answer 1

没有 jQuery:

document.getElementById("one").onchange = function( ){
    var selectedOption = this.options[this.selectedIndex].text;

    var option = getElementByText(document.getElementById("two"), selectedOption * 2);
    option.style.display = "none"; // or u car remove it here
}

function getElementByText(parent, text) {
    for (var i = 0; i < parent.children.length; i ++) {
        if (parent.children[i].text == text) {
            return parent.children[i];
        }
    }
    return false;
}

jsfiddle