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.
4 answers
solution1
2 2018-08-13 05:44:19
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>
solution2
1 2018-08-13 05:40:43
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>
solution3
0 ACCPTED 2018-08-13 05:52:38
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>
solution4
0 2018-08-13 06:01:16
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Get selected value of dynamically created multiple dropdown using jquery
jQuery - dynamically created select boxes not triggering function when value is selected
Get value of Dynamically created select
Using select2 and binding values to dynamically created select boxes
dynamically changing PHP value with dropdown select using JQuery
How to get value of dynamically created dropdown list?
How to get the value from dynamically created checkbox using Jquery with class
How to get value of textbox using jquery which is created dynamically?
How to get radio button value by using select dropdown using jquery
How to select validation for dynamically created textbox from dropdown in jquery?
Related Tags