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

【问题标题】：How do you use jQuery to show html when a HTML select option is clicked?单击 HTML 选择选项时，如何使用 jQuery 显示 html？
【发布时间】：2011-08-09 03:32:56
【问题描述】：

当单击<select> 上的某个<option> 时，我想要显示一些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>

【问题讨论】：

标签： jquery select click

【解决方案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

或者如果您更愿意继续通过 HTML 指定目标<option>，那么：

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

【讨论】：

但请记住，“更改”仅在选项已更改时才有效。如果默认选择该事件，您可能需要手动触发该事件。 $(#addSubject').(...stuff before...).trigger('change');您还需要在选择上使用更改事件，而不是选项。
您不应该在select 元素上捕获更改事件吗？此外，.val() 在select 下提供所选选项的value 属性，OP 的标记中没有该属性
@xixonia，与点击一样。我已经做出改变了，干杯。
这绝对是有道理的，谢谢。出于某种原因，它虽然不起作用。我一定是某个地方出了问题。

【解决方案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) {
        // ...
    }
});

【讨论】：