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

Question

我有一些 html，希望在某个 <option> 时显示。在<select>上被点击。我有下面的 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

<option>元素不会触发点击事件，只有 <select>是的。相反，您可以检查 <select> 的选定值。更改后:

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

<小时/>

或者，如果您愿意继续指定目标 <option>通过 HTML，则:

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