getting value from html drop down in javascript or jquery

Question

i have this drop down in html which is created by java script i need to fetch value from these dynamically created down with the same or id and and post it to through ajax in php can you please help how to get value from these selected drop down

         <select name="criteria[]">
                            <option value="null" disabled selected>- select -</option>
                            <option value="a">a</option>
                            <option value="b">b</option>

            <option value="c">c</option>

 <select name="criteria[]">
                            <option value="null" disabled selected>- select -</option>
                            <option value="a">a</option>
                            <option value="b">b</option>
                            <option value="c">c</option>
 </select>

possible duplicate of [Get selected value of a dropdown's item using jQuery](http://stackoverflow.com/questions/2780566/get-selected-value-of-a-dropdowns-item-using-jquery) — freedomn-m, Sep 01 '15 at 19:14
You should be able to get what you need from the 100s of duplicate questions in Stack Overflow on how to get a value from a drop down: http://stackoverflow.com/search?q=jquery+value+from+dropdown — freedomn-m, Sep 01 '15 at 19:15
@Sushil can u please explain .. do we need to have loop for getting value .. — Jay Zee, Sep 01 '15 at 19:15
you can try this `$(document).on('change', 'select', function(){ console.log($(this).val()); });` or `$('select[name="criteria[]"]').on('change', function(){ console.log($(this).val()); });` both of them will give u the value — Sushil, Sep 01 '15 at 19:16
@Sushil i want the value of all these criteria[] drop down on button click and put in the array submit it through ajax can u please help me in this — Jay Zee, Sep 01 '15 at 19:19
i just have ready ajax function i just array to post here is my script $('.savefilter').click(function(){ var search = { filterName:'aa', startDate :'aa', endDate :'aa', campLogId:'aa' } $.post("asyncscript/addfilterasync.php",search,function(result){ if(result.status=='true'){ } }); }) — Jay Zee, Sep 01 '15 at 19:24
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/88511/discussion-between-sushil-and-jay-zee). — Sushil, Sep 01 '15 at 19:47
are you reading it like this ` $myArray = $_REQUEST['array']; ?>`?? — Sushil, Sep 01 '15 at 20:56

score 1 · Answer 1 · answered Sep 01 '15 at 19:32

so what you can do is loop through the select list using jquery .each() and store the values in the array. here's what you can try.

$(function(){

    var array = [];
    $('#btnGetVal').on('click', function(){
        $('select[name="criteria[]"]').each(function(){
            console.log($(this).val());
            array.push($(this).val());
        });        

        console.log(array);

        $.ajax({
            type: 'post',
             url: 'yourfile.php',
            data: {values:array},
            success: function(d){
                // do something on success
            }
        });

    });


});

here's a working JSFIDDLE. Please check the console for values. Hope this helps

i can abble to get value in php file – Jay Zee Sep 01 '15 at 20:02 — Jay Zee, Sep 01 '15 at 20:02

score 0 · Answer 2 · edited May 23 '17 at 12:14

Your question is not completely clear. You have two identical dropdown controls, with identical names/options. Is this intentional? How do you wish to use them?

If both are required, it is a good idea to make them unique by assigning each a unique ID:

<select id="s1" name="criteria[]">
    ...options...
</select>

You can then access their data easily:

var sel1_val = $('#s1').val();

Because the HTML is created by javascript, you may need to use event delegation:

$(document).on('change', 'select[name="criteria[]"]', function(){
    var sel1_val = $('s1').val();
    var sel2_val = $('s2').val();
    $.ajax({
        type: 'post',
         url: 'your_php_ajax_processor_file.php',
        data: 'sel1=' +sel1_val+ '&sel2=' +sel2_val,
        success: function(d){
            if (d.length) alert(d);
        }
    });
});

In your PHP file:

<?php
    $s1 = $_POST['sel1'];
    $s2 = $_POST['sel2'];
    //now, do what you need to do with the two values

The .on() is necessary to detect events for injected markup.

Note that if you are using AJAX (you are), then you don't need to use a <form> structure -- you can just use a normal div.

See these additional posts for more on AJAX:

AJAX request callback using jQuery

i dont need this on on change i want alll the value from all the dropdown in one array and post it on button click event — Jay Zee, Sep 01 '15 at 19:28

getting value from html drop down in javascript or jquery

2 Answers2