Question

如何从jquery中的选择框和隐藏输入中获取2个不同的变量，即：

<select name="startID[]" class="startID">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="hidden" name="startText[]" value="Text1">

<br />

<select name="startID[]" class="startID">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="hidden" name="startText[]" value="Text2">


<br />

<select name="startID[]" class="startID">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="hidden" name="startText[]" value="Text3">

所以我有3个带有3个隐藏输入的选择框，如何获取每个选择框的值以及附加到的文本？即：如果我选择这样：

Select item is 1 and text is Text1
Select item is 3 and text is Text2
Select item is 2 and text is Text3

提前致谢

Answer 1

如果您想知道已更改的select的值（当用户选择其中任何一个值时），并且还会获得input类型hidden的值旁边就是这样：

$('.startID').on('change', function () {
    var sel = $(this).val();
    var hid = $(this).next('input[type=hidden]').val();

    console.log('Select item is ' + sel.toString() + ' and text is ' + hid.toString());
});

Demo

<强>更新

要实现您在评论中提出的要求，您可以这样做：

// Create two arrays to store the values.
var sel = [];
var hid = [];

$('.startID').on('change', function () {
    // Put the selected values into the arrays.
    sel.push($(this).val());
    hid.push($(this).next('input[type=hidden]').val());

    console.log(sel);
    console.log(hid);

    for (var i = 0; i < sel.length; i++) {
        console.log('Select item is ' + sel[i].toString() + ' and text is ' + hid[i].toString());
    }
});

Demo

Answer 2

function getValues() {
    $('select').each(function (idx, el) {
        console.log("Select item is " + $(el).val() + " and text is " + $(el).next('input[type="hidden"]').val());
    });
}

如果要列出更改后的值：

$('select.startID,input[type="hidden"]').change(getValues);

演示（修改了一下）： http://jsfiddle.net/6ev9evew/

注意 以下更新不是原始问题的答案，但问题的作者不断在评论中发布额外的问题！所以解决方案就在上面！

<强>更新

据我所知，这就是你要找的东西：

function getValues() { var me = this; $('select').each(function (idx, el) { console.log("Select item is " + $(el).val() + " and text is " + $(el).next('input[type="hidden"]').val()); if (el === me) return false; }); }

所以基本上我们在实际元素处停止循环。但只有将此函数传递给事件处理程序时才有效。

DEMO 2： http://jsfiddle.net/6ev9evew/1/

更新2：

所以，根据第三个问题，这是一个实现的版本。正如我在评论部分中提到的，有多种方法可以实现它。此实现使用数组索引始终按顺序。

function getValues() { var result = []; var me = this; $('select').each(function (idx, el) { var $el = $(el); result[10*$el.val()+idx]=("Select item is " + $el.val() + " and text is " + $el.next('input[type="hidden"]').val()+'<br />'); if (me === el) return false; }); $('#res').html(result.join('')); } $('select.startID,input[type="hidden"]').change(getValues);

DEMO 3： http://jsfiddle.net/6ev9evew/2/

但你也可以用array.sort（fn）实现它，但是你要对结果集进行第二次迭代。

无论如何，如果您的真实代码中有十多个选择，请不要忘记修改结果[ 10 * $ el.val（）+ idx]中的乘数！

选择框和隐藏输入中的2个变量

2 个答案: