javascript - 简单的 Javascript 代码在 Chrome 和 Safari 中不起作用

Question

以下部分来自 JS 和 HTML:count() 在任何地方都适用，但 hideKid() 和 showKid() 仅在 Firefox 中。 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>

我还尝试在隐藏属性中放置“隐藏”和空行而不是 bool 类型。没有任何改变

Answer 1

它似乎确实是 option tag not working 的重复项@PaulRoub，但要保持代码看起来相同，一个简单的解决方法是向 onchange 添加一些内容。

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

<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>

<小时/>

这将导致 FireFox 再次触发另一个问题...因此，您可以检查浏览器并处理点击。这将成为我给出的相同答案 another question 。并不完美，但无需完全重写当前代码即可给出正确的结果。