Question

我有很多下拉菜单，当我点击按钮时，我希望它查找所选的选项，并提醒我所说的文字，如'grape'。

它必须使用.closest，尝试了很多变化，但似乎无法找到它.....

<select name="div0" class="dropdowns">
  <option value="orange">orange</option>
  <option value="apple">apple</option>
  <option value="grape">grape</option>
  <option value="peas">peas</option>
</select>

<input type="button" name="mybutton" value="Edit Row">

<select name="div1" class="dropdowns">
  <option value="orange">orange</option>
  <option value="apple">apple</option>
  <option value="grape">grape</option>
  <option value="peas">peas</option>
</select>

<input type="button" name="mybutton" value="Edit Row" class="editrowbutton">

JQUERY (Nearest I can get)
$(document).on('click', '.editrowbutton', function() {

     var thetext =  $(this).closest('select').find('option:selected').text();

    alert(thetext);
});

Answer 1

您在示例中缺少按钮上的类编辑按钮。

使用.prev从目标中获取前一个元素。

$(document).on('click', '.editrowbutton', function() {
    var thetext =  $(this).prev().find('option:selected').text();
    alert(thetext);
});

http://jsfiddle.net/SeanWessell/wt00c2wu/

.closest向父母查找树。由于select不是父级，因此不会返回任何内容。

如果您想搜索兄弟姐妹，您也可以使用prev('selector')或next('selector')。

https://api.jquery.com/category/traversing/tree-traversal/

Answer 2

您还可以使用data- *属性，防止DOM位置错误。

$(function(){
    
  $(document).on("click",'.editrowbutton',function(){
    var target = $(this).data("select");
    alert($('select[name='+target+'] option:selected').text())
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="div0" class="dropdowns">
  <option value="orange">orange</option>
  <option value="apple">apple</option>
  <option value="grape">grape</option>
  <option value="peas">peas</option>
</select>

<input type="button" name="mybutton" data-select="div0" class="editrowbutton" value="Edit Row">

<select name="div1" class="dropdowns">
  <option value="orange">orange</option>
  <option value="apple">apple</option>
  <option value="grape">grape</option>
  <option value="peas">peas</option>
</select>

<input type="button" name="mybutton" data-select="div1" class="editrowbutton" value="Edit Row">

从按钮单击的类中获取最接近的选定下拉选项中的文本

2 个答案: