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中的所有匹配元素，并将后续内容应用于整个集合。

如果您确定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

另外，就像詹姆斯所说的那样，不应该重复。要在许多元素上使用相同的功能，请执行以下操作：

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

保持Ids的独特性......

如何在jQuery中定位所选选项的父div？

3 个答案: