当单击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>s做.相反,您可以检查<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