Javascript switch语句显示来自2个下拉菜单的数据

时间:2014-03-14 11:59:33

标签: javascript switch-statement options

您好,有什么方法可以显示我从两个下拉菜单选项中选择的两个选项之间的数据吗?

<select id="mark">
<option value="blue">blue</option>
<option value="red">red</option>
 <option value="green">green</option>
 </select>

<select id="style">
 <option value="circle">circle</option>
 <option value="triangle">triangle</option>
 <option value="square">square</option>
 </select>
例如,如果从一个盒子中选择蓝色而从另一个盒子中选择三角形,是否有任何可能的方法来获得这个?这是我的尝试。但似乎这不起作用。有什么建议?感谢

    switch(document.getElementById('mark').value,('style').value)
   {
    case 'blue':case'circle':
        {
             do something here
        }
        break;
    case 'red':case'triangle':
                   {
                    do something here
                   }

        break;

 }

4 个答案:

答案 0 :(得分:1)

你需要这样的嵌套开关案例:

var mark = document.getElementById('mark').value;
var style = document.getElementById('style').value;
switch(mark)
{
    case 'blue':
        switch (style) {
            case 'circle':
                functionOne();
                break;
            case 'triangle':
                functionTwo();
                break;
        }
        break;

    case 'red':
        switch (style) {
            case 'circle':
                functionThree();
                break;
            case 'triangle':
                functionFour();
                break;
        }
        break;
}

但我更喜欢别的东西。我无法说出究竟是什么,因为我不知道你想做什么。无论如何。我希望这会有所帮助。

答案 1 :(得分:1)

根据Werner的回答,如果需要,你可以使用字符串连接来实现一个switch

var mark = document.getElementById('mark').value;
var style = document.getElementById('style').value;
switch(mark + ' ' + style)
{
    case 'blue circle':
        functionOne();
        break;
    case 'blue triangle':
        functionTwo();
        break;
    case 'red circle':
        functionThree();
        break;
    case 'red triangle':
        functionFour();
        break;
}

答案 2 :(得分:0)

不,不幸的是,您将始终必须使用嵌套开关。

答案 3 :(得分:0)

你可以试试这个:

document.getElementById("clickMe").onclick = function(){
    switch(document.getElementById('mark').value + '-' + document.getElementById('style').value) {
        case 'blue-circle':
                console.log('blue circle');
        break;
    }

}

http://jsfiddle.net/J3BK3/

也就是说,如果你真的想要同时切换它们。我要做的是首先切换形状,创建它,然后用另一个开关为它着色。