在 javascript 或 jquery 中从 html 下拉列表中获取值

Question

我在 html 中有这个下拉列表，它是由 java 脚本创建的

         <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

所以你可以做的是使用 jquery .each()遍历选择列表并将值存储在数组中。 这是您可以尝试的方法。

$(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
            }
        });

    });


});

这是一个有效的JSFIDDLE 。 请检查控制台的值。 希望这可以帮助

Answer 2

你的问题不完全清楚。 您有两个相同的下拉控件，具有相同的名称/选项。 这是故意的吗？ 您希望如何使用它们？

如果两者都需要，最好通过为每个分配一个唯一的 ID 来使它们唯一：

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

然后，您可以轻松访问他们的数据：

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

由于 HTML 是由 javascript 创建的，因此您可能需要使用事件委托：

$(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);
        }
    });
});

在您的 PHP 文件中：

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

.on()是检测注入标记事件所必需的。

请注意，如果您正在使用 AJAX（您正在使用），那么您不需要使用<form>结构——您可以只使用普通的 div。

有关 AJAX 的更多信息，请参阅这些附加帖子：

使用 jQuery 的 AJAX 请求回调