get value of a dropdown using plain javascript from a dynamically generated row

Question

I have been stuck here for hours now. I need to get what value is selected in the dropdown after button clicked.All the rows are dynamically generated like this image.

I can get the child node and the html but can't get the selected value. My code so far.

 var parent_element=e.parentElement.parentElement.parentElement.previousSibling.previousSibling.previousSibling.previousSibling;
 var selected_element = parent_element.childNodes[1].getElementsByClassName('selectpicker');
    console.log(selected_element);

Html stucture. Any help will be appreciated. Thanks in advance

<div class="col-md-12 neighbourhood-data neighbour-2">
   <div class="row">
       <div class="col-md-2">
           <select name="" class="selectpicker form-control" data-live-search="true">
                <option value="">--Select One--</option>
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
                <option value="4">Four</option>
            </select>
        </div>
        <div class="col-md-1">
            <input type="text" class="form-control" placeholder="Distance">
        </div>
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-2">
                    <button type="button"  class="btn btn-info" onclick="getDistanceLocation(this)">Get distance from google</button>
                </div>
                <div class="col-md-10">
                     <div class="row text-center">
                         <div class="col-md-2">
                            <input type="checkbox" checked="checked">
                         </div>
                         <div class="col-md-2">
                            <input type="checkbox">
                         </div>
                         <div class="col-md-2">
                             <input type="checkbox">
                         </div>
                         <div class="col-md-2">
                             <input type="checkbox">
                         </div>
                         <div class="col-md-2">
                             <input type="checkbox">
                         </div>
                         <div class="col-md-2">
                             <input type="checkbox">
                         </div>
                       </div>
                   </div>
                </div>
            </div>
            <div class="col-md-1">
               <button type="button" class="btn btn-danger neighbourhood-remove-button">Remove</button>
            </div>
         </div>
      </div>

Possible duplicate of [Get selected value in dropdown list using JavaScript?](http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — Kevin Kloet, Nov 15 '16 at 11:13
I can't provide id here cause there will be multiple rows with the same elements. I have to get the value on after button is clicked inside that row. — Amir Hossain, Nov 15 '16 at 11:23

score 0 · Answer 1 · answered Nov 15 '16 at 11:13

0

var value = selected_element.options[selected_element.selectedIndex].value;

answered Nov 15 '16 at 11:13

Jacob

3,580
22
82
146

tried that already, but getting uncaught typeerror. can't read property of undefined – Amir Hossain Nov 15 '16 at 11:15

score 0 · Answer 2 · answered Nov 15 '16 at 11:15

0

You just need the value property from the element. Here's a light example:

function getValue () {
  var el = document.querySelector('#selecty'),
      val = el.value;
  alert("You picked: " + val)
}

<select id='selecty'>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<button onclick="getValue()">What did I pick?</button>

answered Nov 15 '16 at 11:15

casraf

21,085
9
56
91

Can't use id here, there will be multiple rows with the same elements as the row is dynamically generating. I have changed user code to this. var val = e.querySelector('.selectpicker'), val = val.value; alert("You picked: " + val); But getting Uncaught TypeError: Cannot read property 'value' of null – Amir Hossain Nov 15 '16 at 11:21
Doesn't matter how you retrieve the element, the ID was just an example. But sounds like your selector didn't work, are you sure you added the appropriate class there? – casraf Nov 15 '16 at 11:29
1

you need to do `val.options[selected_element.selectedIndex].value` because the `val` variable contains the ` – Kevin Kloet Nov 15 '16 at 11:30
@KevinKloet thanks a lot. works just fine. Wondering why I didn't think that. – Amir Hossain Nov 15 '16 at 11:36
had to remove getElementsByClassName('selectpicker') from second line. then it worked. – Amir Hossain Nov 15 '16 at 11:40

score 0 · Answer 3 · answered Nov 15 '16 at 12:07

Working logic example.

    $("#btnClick").click(function () {
            var selectedOption = $("select option:selected");
            alert(selectedOption.val());
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select>
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
    <option value="4">four</option>
</select>
<input type="button" id="btnClick" value='click to get value' />

get value of a dropdown using plain javascript from a dynamically generated row

3 Answers3