如何在jQuery中定位選定選項的父div？

Question

我對jQuery有點陌生，希望對我遇到的這個問題有所幫助。

這是我想做的事情：

當用戶從選擇框中選擇一個選項時，我需要能夠觸發通知。 頁面上的所有選擇框都具有相同的ID和名稱，並且位於具有相同名稱的div類下。 這部分正在工作，但是頁面上會有多個選擇框。 當我選擇一個實例時，它將向所有實例發出通知，而不僅僅是選定的實例。

如何僅使通知在選定實例上觸發？

到目前為止，這是JS：

$("select[name=regStatus]").change(function () {
      var str = "";
      var text = $(this).find("option:selected").text(); 
            str += " Status changed to: " + $(this).find("option:selected").text();

      $(".responseMsg").text(str).fadeIn(500);
      $(".responseMsg").delay(2000).fadeOut(1000);

     return false;  

  });

和html結構（此代碼將在頁面上重復幾次）：

<div class="dash-hdr-extras plain">
  <div class="responseMsg"></div>
     <select id="regStatusSelect" name="regStatus">
    <option value="0">Example1</option>
        <option value="blah">Blah</option>
        <option value="blah2">Blah 2</option>
     </select>
 </div>

在此方面的任何幫助將不勝感激，因為我仍在學習！

Answer 1

$("select[name=regStatus]").change(function () {
    //...Your code...
    $(this).parent().find(".responseMsg").text(str).fadeIn(500);
    //...Rest of your code...
});

這將獲取觸發change事件的元素的父級，然后找到與選擇器匹配的該元素的子級。

它向所有.responseMsg元素寫入消息的原因是，使用$(".responseMsg")僅選擇DOM中的所有匹配元素，並將.responseMsg內容應用於整個集合。

如果您確定HTML的結構不會改變，另一種選擇是使用prev方法，該方法獲取當前元素的上一個同級。 使用您問題中的代碼，就可以了，但是如果更改了它，可能就行不通了：

$(this).prev().text(str).fadeIn(500);

在單獨的注釋中，您在問題中提到所有select元素都具有相同的ID。 那是無效的HTML，不會引起任何問題。 文檔中的每個ID必須是唯一的。

Answer 2

嘗試這個

$("select[name=regStatus]").change(function () {
      var str = "";
      var text = $(this).find("option:selected").text(); 
            str += " Status changed to: " + $(this).find("option:selected").text();


      $(this).closest("div.dash-hdr-extras").find("div.responseMsg").text(str).fadeIn(500)
      .delay(2000).fadeOut(1000);

  return false;

});

Answer 3

另外，就像詹姆士所說的那樣，ID不應重復。 要在許多元素上使用相同的功能，請執行以下操作：

$("#select1")
    .add('#select2')
    .add('#select3')
    .add('#select4')
    .add('#select5')
    .change(function () {
});

保持ID唯一...