javascript - 如何在div中找到下拉选择的值

Question

查看代码:

<div id="maindiv"> 
    for(i=1;i<3;i++)
    {   
        <div id="subdiv">    
            @html.dropdownlistfor(m=>m.id,new selectlist((viewbag.country) as selectlist,"Value","Text"),new{@class="country"})    
            @html.dropdownlistfor(m=>m.stateid,new selectlist((viewbag.state) as selectlist,"Value","Text"),new{@class="state"})
            <input type="button" value="remove" class="remove">
        </div>
     }
</div>

按钮点击事件:

$("#maindiv").on("click",".remove",function(e){
     alert($(".country")[0].selectedIndex);  // This jquery returns only zero
     $this.parent('div').remove();
});

我需要国家下拉选择索引

Answer 1

您需要使用 closest()家长喜欢，

$("#maindiv").on("click ", ".remove ", function (e) {
    var $parent =$(this).closest('div'); // cache parent
    alert($parent.find('.country')[0].selectedIndex);
    $parent.remove();
});

片段

$("#maindiv").on("click ", ".remove ", function (e) {
    var $parent =$(this).closest('div'); // cache parent
    alert($parent.find('.country')[0].selectedIndex);
    $parent.remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="maindiv">
  <!-- id must be unique, so using class -->
  <div class="subdiv">
    <select class="country">
      <option>Select</option>
      <option value="1">India</option>
    </select>
    <input type="button" value="remove" class="remove">
  </div>
  <div class="subdiv">
    <select class="country">
      <option>Select</option>
      <option value="2">USA</option>
    </select>
    <input type="button" value="remove" class="remove">
  </div>
  <div class="subdiv">
    <select class="country">
      <option>Select</option>
      <option value="3">Australia</option>
    </select>
    <input type="button" value="remove" class="remove">
  </div>
</div>