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

getting value from html drop down in javascript or jquery

本文关键字：下拉列表 获取 HTML 中从 javascript jquery      更新时间：2023-09-26

我在HTML中有这个下拉菜单这是由Java脚本创建的我需要从这些动态创建的相同或id中获取值并通过PHP中的ajax将其发布您能帮助如何从这些选定的下拉菜单中获取值

         <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>

所以你可以做的是使用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。请检查控制台的值。希望对大家有所帮助

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

如果两者都是必需的，那么通过为它们分配一个唯一的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请求回调

相关文章：