Question

所以我有一系列下拉列表，这些下拉列表会根据先前的选择进行更新，即

 <p>Department:</p>
  
  <select id="acr" onchange="fn()">
    <option value=""></option>
    {% for x in acr%}
    <option value="{{x}}">{{ x }}</option>
    {% endfor %}
  </select>

  <p>Semester:</p>

  <select id="sem" onchange="fn()">
    <option value=""></option>
    {% for p in sem%}
    <option value="{{p}}">{{ p }}</option>
    {% endfor %}
  </select>

  <p>Course:</p>

  <select id = 'cla' name="classes">
    <option value=""></option>
    {% for y in results %}
    <option value="{{y}}">{{ y[1] }}</option>
    {% endfor %}
  </select>

，一切都可以在桌面上完美运行。但是，由于某种原因，使用移动浏览器时似乎未触发onchange函数。我已经在Safari和Google Chrome上进行了测试。这是一些相关的JS：

const fn = () => {
      const major = document.getElementsByTagName('select')[0]
      const semester = document.getElementsByTagName('select')[1]
      const classes = document.getElementsByTagName('select')[2]
  
      const opts = Array.from(classes.getElementsByTagName('option'))
  
      console.log(opts[1].value)
      opts.forEach(function (k) {
        if (!k.value) {
          return
        }

我也尝试添加onkeyup / down函数，但这并不能解决问题。

Answer 1

这仅在iOS上发生吗？如果是，请尝试将cursor:pointer添加到body标记中。确保样式为内联<body style="cursor:pointer;">

移动浏览器不会触发onchange功能

1 个答案: