How to get the value from drop downlist in jquery

Question

<optgroup label="Breeding" class="parent-option">
  <option class="child-option" value="Foal Out" disabled style="font-weight: bold; color: #555555 " selected="false">Foal Out</option>
  <option value="Breeding, Foal Out, General">&nbsp;&nbsp; General</option>
  <option value="Breeding, Foal Out, Report">&nbsp;&nbsp; Report</option>

 <option class="child-option" value="Gestation" disabled style="font-weight: bold; color: #555555 " selected="false">Gestation</option>
  <option value="Breeding, Gestation,l General">&nbsp;&nbsp; General</option>
  <option value="Breeding, Gestation, Report">&nbsp;&nbsp; Report</option>

<option  class="child-option" value="Mare" disabled style="font-weight: bold; color: #555555 " selected="false">Mare</option>
  <option value="Breeding, Mare, AI Cooled Semen">&nbsp;&nbsp; AI Cooled Semen</option>
  <option value="Breeding, Mare, AI Frozen Semen">&nbsp;&nbsp; AI Frozen Semen</option>
</optgroup>

How can I get the the value of nearest child-option class and nearest parent-option class value when any of the option is selected from drop down.

possible duplicate of [To get selected value of a dropdown ( — Se0ng11, May 07 '14 at 09:58
What do you mean by nearest? If i select `Report` in dropdown then what will be it's nearest? Will it be `Gestation` Or `Foal Out`? — Dhaval Marthak, May 07 '14 at 09:59

Anoop Joshi P · Answer 1 · 2014-05-07T10:17:55.343

0

You can use .prevAll() method of jquery

$("select").change(function(){
   alert($("option:selected").prevAll(".child-option").val());
});

Demo

edited May 07 '14 at 10:17

answered May 07 '14 at 10:01

Anoop Joshi P

25,373
8
32
53

score 0 · Answer 2 · answered May 07 '14 at 10:01

I think what you are looking for is

$('select').change(function () {
    var $opt = $('option:selected', this),
        $parent = $opt.parent(),
        $child = $opt.prevAll('.child-option').addBack().first();
    console.log($parent.attr('label'))
    console.log($child.text())
})

Demo: Fiddle

score 0 · Answer 3 · answered May 07 '14 at 10:01

0

To get nearest .child-option to that of selected

  $("option:selected").prevAll(".child-option:first");

To get nearest .parent-option to that of selected

  $("option:selected").closest(".parent-option");

answered May 07 '14 at 10:01

Milind Anantwar

81,290
25
94
125

$("option:selected").closest(".parent-option"); This is not working. Another one working just fine – asdfkjasdfjk May 07 '14 at 10:27

How to get the value from drop downlist in jquery

3 Answers3