JavaScript 切換案例

Question

由於某種原因，我的 JavaScript開關盒無法正常工作，我無法弄清楚。

我試圖僅顯示某個選項的某個輸入被選擇：

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>

Answer 1

您不需要開關盒：

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";
}

Answer 2

正如其他人所說，您的case測試與前三個選項的value不匹配。

沒有任何理由重復那行document.getElementById('schools').style.display="block"; 一遍又一遍。 只需讓導致該結果的所有條件落到帶有該指令的一行中即可。

function showHideSchools (obj) {

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

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

}

Answer 3

的value的選項0-2 ， 3-5和6-8是1 ， 2和3分別。

您在 JavaScript 代碼中將它們作為0-2 、 3-5和6-8 。

Answer 4

0-2 3-5 6-8

案例“0-2”：案例“3-5”：

您的值和 case 參數不對應。 當您選擇“0-2”時， .value為“1”。

Answer 5

案例值是錯誤的。 它們必須匹配<option>標簽中的value ，而不是顯示的文本。

所以他們會

case '1':
    document.getElementById('schools').style.display="block"
      break;
    case '2':
    document.getElementById('schools').style.display="block"
      break;

等等。

Answer 6

從您的代碼中，看起來您最好切換條件，以便在值為""時隱藏並在所有其他情況下顯示框 - 這看起來像您想要做的......？

除此之外，我不是 100% 確定您的問題是什么，但如果問題是它不適用於前三個項目，那么原因是它們的值將是1 、 2和3 ，而不是0-2等等，你正在測試。

Answer 7

您沒有指定option值，而是它們在switch的表示。 例如：

case '0-2':

選擇的選項值中沒有類似的東西。

Answer 8

    case '1':
    ...
    case '2':
    ...
    case '3':
    ...
    case '9-11':
    ...
    case '12-14':
    ...

即，您應該檢查選項的value屬性的內容，而不是 <option></option> 標簽內的文本。

Answer 9

只需為它設置一個jsfildde： http ： //jsfiddle.net/nHg9t/ 。 就我所見，這似乎工作得很好......你能看看這個，並說它是做正確的事情，如果沒有，那么你的測試如何不同......