當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？

回答

相關問題