Question

我无法获得以下HTML来触发我的JS函数：

HTML：

<table style="margin-bottom: 8px">
    <tr>
        <td>
            <label><b>Select Language:</b></label>
        </td>
        <td>
            <select class="dropdown" id="selectlanguage">
                <option id="enBtn">English</option>
                <option id="zhBtn">简体中文</option>
            </select>
        </td>
    </tr>
</table>

JavaScript：

 $("#enBtn").bind("click", function () {
    setLanguage("en");
      console.log("en");
  });

  $("#zhBtn").bind("click", function () {
    setLanguage("zh");
     console.log("zh");
  })

当我使用以下HTML时，setlanguage函数可以正常工作：

<div>  
    <a href="#" id="enBtn">English</a>  
    <a href="#" id="zhBtn">简体中文</a>  
</div>

但是当我尝试使用下拉列表触发时，它不起作用。

Answer 1

如果您使用的是选择/下拉列表，则必须将处理程序绑定到选择/下拉列表并监听更改。

$('#selectlanguage').change(setLanguage)

<select class="dropdown" id="selectlanguage">
  <option id="enBtn" value="en">English</option>
  <option id="zhBtn" value="zh">简体中文</option>
</select>

和处理程序：

function setLanguage() {
  console.log($(this).val());
}

如果您不想触摸已经编写的setLanguage功能：

$('#selectlanguage').change(getLanguage)

function getLanguage() {
  console.log($(this).val());
  setLanguage($(this).val());
  //or handle what is in $(this).val() however you want to
}

下拉列表不会触发javascript函数

1 个答案: