JavaScript 切换大小写

标签 javascript html

我的 JavaScript switch 案例由于某种原因无法正常工作,我无法弄清楚。

我正在尝试仅显示某个特定选项的特定输入:

function showHideSchools(obj){

    var curSel = obj.options[obj.selectedIndex].value

    switch(curSel)
    {
        case '0-2':
            document.getElementById('schools').style.display="none"
            break;
        case '3-5':
            document.getElementById('schools').style.display="block"
            break;
        case '6-8':
            document.getElementById('schools').style.display="block"
            break;
        case '9-11':
            document.getElementById('schools').style.display="block"
            break;
        case '12-14':
            document.getElementById('schools').style.display="block"
            break;
        case '15-16':
            document.getElementById('schools').style.display="block"
            break;
        case '17-18':
            document.getElementById('schools').style.display="block"
            break;
        case '19 and over':
            document.getElementById('schools').style.display="block"
            break;

        default:
            document.getElementById('schools').style.display="none"
    }
}

这是 HTML:

<p>
    <label for="childrenAges">Ages of children still living at home: </label>
    <select name="childrenAges" id="childrenAges" onchange="showHideSchools(this);">
        <option>Select one</option>
        <option value="0-2">0-2</option>
        <option value="3-5">3-5</option>
        <option value="6-8">6-8</option>
        <option value="9-11">9-11</option>
        <option value="12-14">12-14</option>
        <option value="15-16">15-16</option>
        <option value="17-18">17-18</option>
        <option value="19 and over">19 and over</option>
    </select>
</p>

<div id="schools" style="display:none">
    <p>
        <label for="schoolName">What school/s do they attend: </label>
        <input type="text" name="schoolName" />
    </p>
</div>

最佳答案

你不需要开关外壳:

if(obj.options[obj.selectedIndex].value != "Select one" && obj.options[obj.selectedIndex].value != "0-2"){
    document.getElementById('schools').style.display="block";
}else{
    document.getElementById('schools').style.display="none";
}

关于JavaScript 切换大小写,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3290550/

相关文章:

javascript - 最小化浏览器窗口时调整 Kendo RangeSlider 的大小

javascript - React/Redux 从组件简单访问 Store

html - 当鼠标悬停但不移动时,转换后的图像不会保持可见?

html - CSS 在页面中切换时

javascript - JQuery/Django 有办法构建 "click the text to edit"吗?

javascript - Javascript中如何区分首次页面加载和连续页面刷新事件?

javascript - 鼠标移动时的 Canvas

javascript - 如何将 "e.target.id"用作 for 循环中的索引?

javascript - 以可变速度递增计数器

html - 防止React-router-dom刷新页面并重置点击时输入的信息