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>

Answer 1

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

Answer 2

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