javascript - 来自选择框和隐藏输入的 2 个变量

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

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

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

演示 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);

演示 3: http://jsfiddle.net/6ev9evew/2/

但是您也可以使用 array.sort(fn) 来实现它，但对结果集进行第二次迭代。

无论如何，如果您的实际代码中有超过十个选择，请不要忘记修改结果处的乘数[10*$el.val()+idx]!