Question

我的页面中有几个下拉列表来收集用户首选项。我需要从每个下拉列表中获取用户选择的值，然后将它们传递给本地asp程序以供使用。我用过：

$(document).ready(function() {

            $('#my_select').change(function() {

                // assign the value to a variable

                var selectVal = $('#my_select :selected').val();

                $(".test").html(selectVal);

            });
        });

这从一个下拉列表获取值，但我似乎无法在我的页面中使用此值。到目前为止我能找到的是如何使用一个下拉值中的值。

Answer 1

$(document).ready(function() {
         var selectVal;

            $('#my_select').change(function() {

                // assign the value to a variable

                selectVal = $('#my_select option:selected').val();

                $(".test").html(selectVal);

            });
        });

Answer 2

看起来你已经为多个选择框设置了一个ID（#my_select） - 这是不正确的。如果您有多个选择，请为它们分配一个唯一的ID或（更好）一个样式（如.my_select）。然后你可以修改你的js如下：

        $('.my_select').change(function() {

            // assign the value to a variable

            var selectVal = $("option:selected", this);

            $(".test").html(selectVal);

        });

Answer 3

使用此代码：

$('#my_select').change(function () {

    $(".test").html("");
    $('#my_select :selected').each(function (i, selected) {
        // assign the value to a variable
        var selectVal = $(this).val();
        $(".test").append(selectVal);
    });

});

Answer 4

 var g = {};
 $('select').change(function ()
 {
     var all = $('select').map(function (i, n)
     {
         return {
             'name': this.name,
             'val': this.value
         }
     }).get();
     var goingToServer = JSON.stringify(all); //do what ever...
     console.log(goingToServer);
 });

这是您发送到服务器的响应：

[{"name":"s1","val":"v1"},{"name":"s2","val":"v4"},{"name":"s3","val":"v6"}]

example

Answer 5

要在使用时获得最佳性能：选择选择元素，首先使用纯CSS选择器选择元素，然后使用.filter（“：selected”）。

  $(document).ready(function() {

      var selectVal;  //Globalize the variable

      $('#my_select').change(function() { 

      selectVal = $('#my_select option').filter(":selected").val();

      $(".test").html(selectVal);

       });
  });

Answer 6

这很简单

HTML代码：

<select class="select_field" id="l_type" name="l_type">
    <option value=" ">Select type</option>
    <option value="cu">Cu</option>
    <option value="Ve">Ve</option>
    <option value="Ex">Ex</option>
</select>
<select class="select_field" id="l_type" name="l_type">
    <option value=" ">Select type</option>
    <option value="cu">Cu</option>
    <option value="Ve">Ve</option>
    <option value="Ex">Ex</option>
</select>
<select class="select_field" id="l_type" name="l_type">
    <option value=" ">Select type</option>
    <option value="cu">Cu</option>
    <option value="Ve">Ve</option>
    <option value="Ex">Ex</option>
</select>

<input type="button" value="GetVal"/>

Java脚本代码：

$(document).ready(function () {
    var selectVal = [];
    $('input:button').click(function () {
        $('select').each(function(i,e){            
            selectVal.push($('select:eq('+i+') option:selected').val());            
        });
        console.log(selectVal);
    });
});

最后 jsfiddle

Answer 7

以下是演示JSFIDDLE 。看看

HTML：

<select name="select_box_1" id="select_box_1" class="sel_boxes">
<option value="select_box_1_value_1">select_box_1_value_1</option>
<option value="select_box_1_value_2">select_box_1_value_2</option>
</select>

<select name="select_box_2" id="select_box_2" class="sel_boxes">
<option value="select_box_2_value_1">select_box_2_value_1</option>
<option value="select_box_2_value_2">select_box_2_value_2</option>
</select>

<select name="select_box_3" id="select_box_3" class="sel_boxes">
<option value="select_box_3_value_1">select_box_3_value_1</option>
<option value="select_box_3_value_2">select_box_3_value_2</option>
</select>

JS：

$('.sel_boxes').change(function(){
    var param_string="";
    $('.sel_boxes').each(function(index) {
        var elem_name = $(this).attr('name');
        var elem_value = $(this).val();

        param_string = param_string+elem_name+"="+elem_value+"&";
    });
    param_string = param_string.substring(0, param_string.length - 1)
    alert(param_string)
});

Answer 8

很容易获得所有选定的值，如下所示：

$('select').each(function(){
    console.log($(this).attr("name") = $(this).val());
});

我做了a Fiddle that shows this is action and builds a string of key=value pairs我相信OP需要传递给他的ASP：

var vals = [], str=null;    
$('select').change(function(){
    getVals();
});
$('button').click(function(){
    getVals();
    printVals();
});        
function getVals(){
    vals = [];
    $('select').each(function(){
        vals[$(this).attr("name")] = $(this).val();
    });
};
function printVals(){
    str="";
    for (var key in vals) {
        str += ((str)?"&":"") + key + "=" + vals[key];
    }
    alert(str);
}

使用来自多个下拉列表的选定值

8 个答案: