how to get the value of parent select with same class

Question

This is a sample output, I want to get the value of the parent select option,

  <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>

the result i get is ( parent_val = 2, and current_val = 2 ) i should get a value of 1 for the parent_val

Answer 1

I'd probably use closest to navigate to the ul and then siblings to get the select . I'd also use val to get the value.

$('.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);
});

Note that you'll get undefined for the parent value if you change the value of one of the top-level selects , since siblings("select") doesn't match anything.

Example:

 $('.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. Use this context to get the current select
2. Use .closest() then use .prev() to get the parent select