这个js代码不起作用，我需要另一双眼睛

Question

我正在尝试将选定的选项添加到使用 js 的标记中。我尝试在“Shopify”上添加嵌入式代码，它不会更改另一个 .使用 w3school 编辑器时，它可以工作。知道为什么它在这里不起作用吗？

<div style="text-align:center;">
  <table border="2">
    <tbody>
      <tr>
        <td>
          <select onchange="genderChoose()" id="userGender"> 
            <option value="null">Choose gender</option><option value="1">Women</option>
            <option value="Men">Men</option> 
          </select>
        </td>
        <td>
          <select id="category">
            <option value="Choose category">Choose category
            </option>
          </select>
        </td>
        <td>
          <input type="text"><input id="searchygolide" type="submit" 
          value="Ygolide it !">
        </td>

      </tr>
    </tbody>
  </table>
  <script>
    function genderChoose(){
      if (document.getElementById("userGender").value == 1) 
      {
        document.getElementById("category").innerHTML = '<option 
        value="shirts">shirts</option><option value ="tops">tops</option>'
      }
    }
  </script>
</div>

Answer 1

您尝试设置为#category 元素的innerHTML 的字符串中间似乎有一个换行符，就在value="shirts" 之前。因此，您应该在控制台中看到一个错误。删除换行符以修复字符串。

<script>
function genderChoose(){
  if (document.getElementById("userGender").value == 1) {
    document.getElementById("category").innerHTML = '<option value="shirts">shirts</option><option value ="tops">tops</option>'
  }
}
</script>