如何获取具有相同类的父选择的值

Question

这是一个示例输出，我想获取父选择选项的值

  <ul>
     <li> 
         <select class='cbo'><option value='1' selected>1</option></select>
         <ul>
             <li>
                <select class='cbo'><option value='2' selected>2</option></select>
             </li>
         </ul>
     </li>
    </ul>



  <script>
         $('.cbo').on('change', function(){
                 var current_val = $(this).find(':selected').val();
                 var parrent_val = $(this).parent().parent().parent()
                                      .find(':selected').val();
                   console.log('parent: '+parent_val' current'+current_val);
         })
    </script>

我得到的结果是（parent_val = 2，current_val = 2） 我应该为parent_val获得1的值

Answer 1

我可能会使用closest导航到ul，然后导航siblings来获取select。我还会使用val来获取值。

$('.cbo').on('change', function(){
    var $this = $(this);
    var current_val = $this.val();
    var parent_val = $this.closest("ul").siblings("select").val();
    console.log('parent: ' + parent_val + ' current' + current_val);
});

请注意，如果您更改其中一个顶级undefined的值，则会获得父值的selects，因为siblings("select")与任何内容都不匹配。

示例：

$('.cbo').on('change', function(){
    var $this = $(this);
    var current_val = $this.val();
    var parent_val = $this.closest("ul").siblings("select").val();
    console.log('parent: ' + parent_val + ' current' + current_val);
});

<ul>
 <li> 
     <select class='cbo'>
        <option value='1' selected>1</option>
        <option value='2'>2</option>
        <option value='3'>3</option>
        <option value='4'>4</option>
    </select>
     <ul>
         <li>
            <select class='cbo'>
                <option value='1'>1</option>
                <option value='2' selected>2</option>
                <option value='3'>3</option>
                <option value='4'>4</option>
            </select>
         </li>
     </ul>
 </li>
 <li> 
     <select class='cbo'>
        <option value='1'>1</option>
        <option value='2' selected>2</option>
        <option value='3'>3</option>
        <option value='4'>4</option>
    </select>
     <ul>
         <li>
            <select class='cbo'>
                <option value='1'>1</option>
                <option value='2' selected>2</option>
                <option value='3'>3</option>
                <option value='4'>4</option>
            </select>
         </li>
     </ul>
 </li>
 <li> 
     <select class='cbo'>
        <option value='1'>1</option>
        <option value='2'>2</option>
        <option value='3' selected>3</option>
        <option value='4'>4</option>
    </select>
     <ul>
         <li>
            <select class='cbo'>
                <option value='1'>1</option>
                <option value='2' selected>2</option>
                <option value='3'>3</option>
                <option value='4'>4</option>
            </select>
         </li>
     </ul>
 </li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

$('.cbo').on('change', function() {
  var current_val = $('option:selected',this).val();
  var parrent_val = $(this).closest('ul').prev('select.cbo').find('option:selected').val();
  console.log('parent: ' + parrent_val+ ' current' + current_val);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <select class='cbo'><option value='1' selected>1</option><option value='2' >2</option></select>
    <ul>
      <li>
        <select class='cbo'><option value='1' >1</option><option value='2' selected>2</option></select>
      </li>
    </ul>
  </li>
  
  
  <li>
    <select class='cbo'><option value='3' selected>3</option><option value='4' >4</option></select>
    <ul>
      <li>
        <select class='cbo'><option value='3' >3</option><option value='4' selected>4</option></select>
      </li>
    </ul>
  </li>
</ul>

1. 使用此上下文获取当前选择
2. 使用.closest()，然后使用.prev()获取父选择