javascript - JQuery 选择值到变量中

Question

我已经看遍了，无法弄清楚为什么这段代码不起作用。

http://jsfiddle.net/kCLxJ/

当下拉列表设置为值“3”或“4”时，下拉列表下方应弹出另一个字段。有任何想法吗？

Answer 1

jsFiddle

改变这个：

var val = $('#event_options_id option:selected').html();

到 ：

var val = $('#event_options_id').val();

Answer 2

固定工作版本

首先，您需要.val()像指出的那样打电话。

var val = $('#event_options_id option:selected').val();

然后根据您使用的选择器，您需要parseInt()在 val 上使用它以使其成为这样的数字

if ($.inArray(parseInt(val,10), arr) > -1) {

定义数组时还有一个额外的逗号。

完整的工作代码

$(document).ready(function() {

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

        $('.container_add_form').remove();

        var val = $('#event_options_id option:selected').val();
        var arr = [3, 4];

        if ($.inArray(parseInt(val,10), arr) > -1) {
            $('<input type="hidden" name="age_required" id="age_required" value="yes" /><div class="container_add_form"><p class="text_content">Please enter your age for grouping purposes.<br /><input name="age" type="text" id="age" size="3" /></p></div>').fadeIn('slow').appendTo('.add_form');
        }
    });
});​

Answer 3

1) 使用.val()而不是.html()获取选项的值。

2）您将字符串值与数组中的数字进行比较，这总是会失败。

http://jsfiddle.net/kCLxJ/4/

var val = $('#event_options_id option:selected').val();
var arr = ['3', '4'];

Answer 4

更改这些行。

    var val = $('#event_options_id option:selected').val();
    var arr = ["3", "4"];

要获取组合框值，您必须使用 'val()' 而不是 'html()'。而且您必须将数组的元素更改为字符串。变量 val 是一个字符串。inArray 将尝试将元素作为字符串而不是整数来查找。

Answer 5

我更新了你的代码：http: //jsfiddle.net/kCLxJ/7/

$(document).ready(function() {

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

        $('.container_add_form').remove();

        // you used .text() but should've used .val()
        var val = $('#event_options_id option:selected').val();
        var arr = [3, 4];

        /*
            another problem was that you didn't parse the value into an integer
            but you were comparing the value to an array of integers
        */
        if ($.inArray(parseInt(val), arr) > -1) {
            $('<input type="hidden" name="age_required" id="age_required" value="yes" /><div class="container_add_form"><p class="text_content">Please enter your age for grouping purposes.<br /><input name="age" type="text" id="age" size="3" /></p></div>').fadeIn('slow').appendTo('.add_form');
        }
    });
});