单击 HTML 选择选项时如何使用 jQuery 显示 html？

Question

我有一些 html，希望在单击 上的某个时显示。我有下面的 HTML 代码。是这样的吗？即使没有错误，它似乎也不起作用。

jQuery:

$('#addSubject').click(function(){
     $('#pgHide').show();
     $('span.centerMessage').hide();
     $('#addSubjectPopup').show();
});

HTML:

<select>
     <option id="addSubject">Add Subject</option>
</select>
<div id="pgHide" style="display: none; ">
     <span class="centerMessage">
          <img src="../images/loading.gif" />
     Creating...</span>
     <div class="centerMessage" id="addSubjectPopup" style="display: none;">
          <span class="closePopup">close</span>
          <div id="insideCenterMessage">
          <label>Add Subject</label>
          <input type="text" name="subject" id="addSubjectField">
          <input type="submit" value="Add Subject" id="addSubjectBttn">
     </div>
</div>

Answer 1

元素不会触发点击事件，只有 才会触发。相反，您可以在更改后检查 的选定值：

$('select').change(function () {
    if ($(this).val() == 'Add Subject') {
        // Rest of your code
    }
}).change(); // Trigger change immediately to work on DOM-ready

---

或者，如果您希望继续通过 HTML 指定目标 ， 然后：

$('select').change(function () {
    if ($(this).find('#addSubject:selected').length) {
        // Rest of your code
    }
}).change(); // Trigger change immediately to work on DOM-ready

Answer 2

然后你必须像这样改变你的标记

<select id="addSubject">
     <option value="1">Add Subject</option>
</select>
<div id="pgHide" style="display: none; ">
     <span class="centerMessage">
          <img src="../images/loading.gif" />
     Creating...</span>
     <div class="centerMessage" id="addSubjectPopup" style="display: none;">
          <span class="closePopup">close</span>
          <div id="insideCenterMessage">
          <label>Add Subject</label>
          <input type="text" name="subject" id="addSubjectField">
          <input type="submit" value="Add Subject" id="addSubjectBttn">
     </div>
</div>

，使用

$('#addSubject').change(function (e) {
    if ($(this).val() == 1) {
        // ...
    }
});