当HTML选择选项被点击时，你如何使用jQuery来显示html？

我有一些html，我想要显示某个<option>在<select>被点击。我有下面的代码为下面的HTML。那是怎么做的？即使没有错误，它似乎也没有工作。当HTML选择选项被点击时，你如何使用jQuery来显示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>

来源

2011-04-20 chromedude

<option>元素不会触发点击事件，只有<select>就做。相反，它被改变后，你可以检查<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

来源

2011-04-20 02:07:33

但请记住，“更改”仅适用于选项已更改。如果默认情况下被选中，您可能需要手动触发事件。 $（＃addSubject'）。（... ...之前的东西）。trigger（'change'）;您还需要在选择上使用更改事件，而不是选项。 – 2011-04-20 02:08:56

不应该捕获'select'元素上的更改事件吗？此外，'.val（）'给出'select'下所选选项的'value'属性，这与OP的标记 – 2011-04-20 02:09:10

@xixonia不同，就像点击一样。我做了改变，欢呼。 – 2011-04-20 02:13:08

您必须像这样更改标记

<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) { 
     // ... 
    } 
});

来源

2011-04-20 02:12:24

当HTML选择选项被点击时，你如何使用jQuery来显示html？

回答

相关问题