Get the value of dynamically created select dropdown boxes using JQuery

Question

I need to get the value of the chosen dynamically created select dropdown box using JQuery.

Example:

If I select the value Red from the first drop down, the Jquery should alert the value "red".

If I select another value from the second drop down, the next Jquery should alert that selected value. These dropdowns are dynamically created dropdowns.

<select class="" id="part_no0" name="part_no[]"> 
  <option value="red">Red</option>
  <option value="green">Green</option>  
  <option value="blue">Blue</option>    
</select>
<select class="" id="part_no1" name="part_no[]"> 
  <option value="car">Car</option>
  <option value="bike">Bike</option>    
  <option value="bus">Bus</option>  
</select>
<select class="" id="part_no2" name="part_no[]"> 
  <option value="apple">Apple</option>
  <option value="huawei">Huawei</option>    
  <option value="sony">Sony</option>    
</select>

Any suggestions in this regard will be much appreciated.

Possible duplicate of [Get selected value in dropdown list using JavaScript?](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — Rush.2707, Aug 13 '18 at 05:43

score 2 · Answer 1 · answered Aug 13 '18 at 05:44

You can use change event to get the value.

$(document).ready(function(){
  $("select[name='part_no[]']").change(function(){
   console.log($(this).val());
  }); 
})

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <select class="" id="part_no0" name="part_no[]"> 
  <option value="red">Red</option>
  <option value="green">Green</option>  
  <option value="blue">Blue</option>    
</select>
<select class="" id="part_no1" name="part_no[]"> 
  <option value="car">Car</option>
  <option value="bike">Bike</option>    
  <option value="bus">Bus</option>  
</select>
<select class="" id="part_no2" name="part_no[]"> 
  <option value="apple">Apple</option>
  <option value="huawei">Huawei</option>    
  <option value="sony">Sony</option>    
</select>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

</body>
</html>

score 1 · Answer 2 · answered Aug 13 '18 at 05:40

You need to use event delegation here. Add a change event listener on the parent and then check if the event bubbled from the provided selector.

// Adding a change event listener
$("#result").on("change", "select[name='part_no[]']", function(){
  console.log(this.value);
})

// Asynchronously adding dropdowns
setTimeout(function(){
    $("#result").html(`<select class="" id="part_no0" name="part_no[]"> 
    <option value="red">Red</option>
    <option value="green">Green</option>  
    <option value="blue">Blue</option>    
  </select>
  <select class="" id="part_no1" name="part_no[]"> 
    <option value="car">Car</option>
    <option value="bike">Bike</option>    
    <option value="bus">Bus</option>  
  </select>
  <select class="" id="part_no2" name="part_no[]"> 
    <option value="apple">Apple</option>
    <option value="huawei">Huawei</option>    
    <option value="sony">Sony</option>    
  </select>`);
}, 2000);

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

score 1 · Accepted Answer · answered Aug 13 '18 at 05:52

You can do so using simple javascript , add On change event listener to all your select with a function to handle the logic with the element as a value.

See this example

$('.addelemnt').on('click', function() {

  var dynamicElment = $('.temp-container').html();
  $('.select-wrapper').html(dynamicElment);
  $('.temp-container').remove();

});

function AlertVal(e){
  alert(e.options[e.selectedIndex].value);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="select-wrapper"></div>
<div class="temp-container">
  <select onchange="AlertVal(this);" class="" id="part_no0" name="part_no[]">
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
  </select>
  <select onchange="AlertVal(this);" class="" id="part_no1" name="part_no[]">
    <option value="car">Car</option>
    <option value="bike">Bike</option>
    <option value="bus">Bus</option>
  </select>
  <select onchange="AlertVal(this);" class="" id="part_no2" name="part_no[]">
    <option value="apple">Apple</option>
    <option value="huawei">Huawei</option>
    <option value="sony">Sony</option>
  </select>
</div>
<button class="addelemnt">Create Dynamique Content</button>

this works!!! now i want to get the selected dropdown's id value i mean id="part_no2". — azam personal, Aug 13 '18 at 06:25

score 0 · Answer 4 · answered Aug 13 '18 at 06:01

Try this

<select class="" id="part_no0" name="part_no[]"> 
  <option value="red" onclick="alert(this.value);">Red</option>
  <option value="green" onclick="alert(this.value);">Green</option>  
  <option value="blue" onclick="alert(this.value);">Blue</option>    
</select>
<select class="" id="part_no1" name="part_no[]"> 
  <option value="car" onclick="alert(this.value);">Car</option>
  <option value="bike" onclick="alert(this.value);">Bike</option>    
  <option value="bus" onclick="alert(this.value);">Bus</option>  
</select>
<select class="" id="part_no2" name="part_no[]"> 
  <option value="apple" onclick="alert(this.value);">Apple</option>
  <option value="huawei" onclick="alert(this.value);">Huawei</option>    
  <option value="sony" onclick="alert(this.value);">Sony</option>    
</select>

Doesn't work with keyboard navigation though.

I hope I was of some small help. – happy Aug 13 '18 at 06:02 — happy, Aug 13 '18 at 06:02

Get the value of dynamically created select dropdown boxes using JQuery

4 Answers4