Как вы используете jQuery для показа html при выборе опции HTML? - PullRequest
Новая
       20

Как вы используете jQuery для показа html при выборе опции HTML?

1 голос
/ 20 апреля 2011

У меня есть какой-то 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>

Ответы [ 2 ]

6 голосов
/ 20 апреля 2011

<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
0 голосов
/ 20 апреля 2011

Вы должны будете изменить свою разметку следующим образом 

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