Question

所以这是我的想法：

<select id="Main_body">
<option value="1">Alpha</option>
<option value="2">Beta</option>
</select>

<select id="Sub1">
<option value="11">Omega</option>
<option value="12">Gamma</option>
</select>

<select id="Sub2">
<option value="21">Foxtrot</option>
<option value="22">Kilo</option>
</select>

如果我在“Main_Body”选项中选择“Alpha”，那么我将选择“Sub1”类别。如果我选择“Beta”，则会显示“Sub2”选项。

有没有办法在javascript中执行此操作？如果是的话，请帮助我。谢谢大家

Answer 1

根据所选选项更改select元素的可见性。

javaScript：

document.getElementById("Sub2").style.visibility = 'hidden';

var mainDDL = document.getElementById("Main_body");

mainDDL.onchange = function(){
    // first hide both select element
    document.getElementById("Sub1").style.visibility = 'hidden';
    document.getElementById("Sub2").style.visibility = 'hidden';
    // check the currently selected options value and make the matched valued element visible
    if(this.value == 1){     
        document.getElementById("Sub1").style.visibility = 'visible';
    }
    else{    
        document.getElementById("Sub2").style.visibility = 'visible';
    }
};

您还可以检索所选选项的文本，并相应地显示/隐藏所需的选择元素。在这种情况下，用下面的代码替换if-else块，

// get the selected options text
var selectedOption = this.options[this.value - 1].text;

// show/hide select element according to the match with the selected option
if(selectedOption  == "Alpha"){     
    document.getElementById("Sub1").style.visibility = 'visible';
}
else{    
    document.getElementById("Sub2").style.visibility = 'visible';
}

jsFiddle

Answer 2

我将使用显示：因为只能隐藏可见性。你可以看看的jsfiddle：http://jsfiddle.net/anyuc7/sjyuo685/1/

var sub1=document.getElementById("Sub1"),
    sub2=document.getElementById("Sub2"),
    Main_body = document.getElementById("Main_body");
sub2.style.display = 'none';
Main_body.onchange = function (){
    if(this.value == 1){
        sub2.style.display = 'none';
        sub1.style.display = 'inline-block';
    }else{
        sub1.style.display = 'none';
        sub2.style.display = 'inline-block';
    }
};

根据选择选择选择选项

2 个答案: