HTML 선택 옵션을 클릭하면 jQuery를 사용하여 HTML을 어떻게 표시합니까?

<select>의 특정 <option>을 클릭하면 표시되는 html이 있습니다. 나는 아래의 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 '). (... stuff before ...). trigger ('change '); 또한 선택 항목이 아닌 선택 항목에서 변경 이벤트를 사용해야합니다. –

'select' 엘리먼트에 change 이벤트를 포착해서는 안됩니까? 게다가'.val()'은 클릭과 마찬가지로 OP의 마크 업 –

@xixonia에없는'select' 아래 선택된 옵션의'value' 속성을 제공합니다. 나는 변화를 만들었다. –

당신은

<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을 어떻게 표시합니까?

답변

관련 문제