Question

这里来自JS和HTML的部分： count（）只能在Firefox中使用 hideKid（）和 showKid（）。 Chrome的调试器甚至没有实现具有* Kid（）功能的行。

function showKid(value) {
  document.getElementsByName('child')[value].hidden = false;
}

function hideKid(value) {
  document.getElementsByName('child')[value].hidden = true;
}

<select name='age' onchange='count()'>
  <option onclick='hideKid(0)'>Adult</option>
  <option onclick='showKid(0)'>Kid</option>
</select>

<div name='child' hidden='hidden'>
  <select onchange='count()'>
    <option name='littleChild'>2 - 6</option>
    <option>7 - 13</option>
  </select> years
</div>

我还尝试在隐藏属性中放入“隐藏”和空行而不是布尔类型。什么都没有改变

Answer 1

它似乎与option tag not working @PaulRoub重复，但是为了让代码保持相同，一个简单的方法就是向onchange添加内容。

function getSelectedOption(select) {
    return select.options[select.selectedIndex];
}

＆＃13;

<select name='age' onchange='getSelectedOption(this).click(); count()'>
  <option onclick='hideKid(0)' >Adult</option>
  <option onclick='showKid(0)' >Kid</option>
</select>

<div name='child' hidden='hidden'>
  <select onchange='count()'>
    <option name='littleChild'>2 - 6</option>
    <option>7 - 13</option>
  </select> years
</div>

<script>
function count() { }
  
function showKid(value) {
  document.getElementsByName('child')[value].hidden = false;
}

function hideKid(value) {
  document.getElementsByName('child')[value].hidden = true;
}

function getSelectedOption(select) {
   return select.options[select.selectedIndex];
}
</script>

＆＃13;

这将导致FireFox再次触发的另一个问题...因此，您可以检查浏览器并处理点击。这就变成了我给another question给出的答案。不完美，但在没有完全重新编写当前代码的情况下提供正确的结果。

Answer 2

最好检查select的值以隐藏内容。 onclick on选项不会绑定到选项。您可以在select上绑定另一个onchange函数，并检查select的值以确定应隐藏哪个。只需添加以下代码即可。这是一个小型演示：https://jsfiddle.net/2xb47g78/4/。

    var ageSelect = document.getElementsByName('age')[0];
    ageSelect.addEventListener('change', function() {    
        if (ageSelect.value == "Adult"){
            hideKid(0);
        }else{
            showKid(0)
        }         
    })

简单的Javascript代码在Chrome和Safari中无效

2 个答案: