选择不同的选项时显示不同的div文件

时间:2014-01-14 14:50:15

标签: javascript html

我有一个Html文件,根据Select文件的输入,我需要显示一些选项。

因此,当我选择Android或iOS时,我需要显示某些选项,当我选择Mac或Windows时,我需要显示其他一些选项。我把选项变成了div文件。

所以我的javascript看起来像

function checkvalue(val)
{
    if(val==="Android" || "iOS")
    {
        document.getElementById('mobile_device').style.display='none';
    }
    else 
    {
        document.getElementById('mobile_device').style.display='none'; 
    }

    if(val==="Windows " || "Mac ")
    {
        document.getElementById('desktop_device').style.display='block';
    }
    else 
    {
        document.getElementById('desktop_device').style.display='none'; 
    }
}

在Html中

<b>Device Type : </b><select name = "type" id="type"  onchange='checkvalue(this.value)' select style="width:150px ; height:25px"><option>Android</option><option>iOS</option><option>Windows</option><option>Mac</option><option>General</option></select>


    <div id="mobile_device" style="display:none;"><font size="3"><b>Select the mobiles </b</font>
    </br></br>

    </div>
    <div id="desktop_device" style="display:none;">
    <font size="3"><b>Select the desktops :</b></font>

    </div>

但它没有正确显示。无论我选择它只显示桌面div。我哪里错了?

1 个答案:

答案 0 :(得分:0)

首先,您需要为option标记指定值。其次,您需要传递所选的文本值,可能就像这样

checkvalue(this.options[this.selectedIndex].value)

接下来,你的或陈述应该是这样的

if(val === "Android" || val === "iOS")
{ // Should not be the same as the else clause. I'm guessing you meant block here
  document.getElementById('mobile_device').style.display='block';
}
else 
{ // Then this none makes sense.
  document.getElementById('mobile_device').style.display='none'; 
}