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

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

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

---

提前感谢

如果您想知道当用户在其中任何一个选择上选择值时更改的选择的值，并获得其旁边隐藏的输入类型的值，请按以下方式操作：

$('.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());
});

更新

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

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

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

如果要列出更改时的值：

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

演示修改了一点：

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

更新：

据我所知，这正是你想要的：

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：

更新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：

但是您也可以使用array.sortfn实现它，但需要在结果集上进行第二次迭代

---

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

无法理解您想要实现什么？您的代码使其无法实现该结果。每个选择框都完全相同。你必须以某种逻辑方式将它们区分开来……我认为有某种方式，下面提到了完美，但我确实明白了，如果你能解释一下：每个和$el，如果可以一个接一个地打印结果，一旦我们选择第一个选项，它将打印文本1，一旦我们选择了第二个选项，它将打印Text1和Text2，以此类推，thanksEach将迭代所有的select元素，这意味着，它调用作为参数传递的匿名函数，这个函数将获得每个函数体传递的两个参数，这两个参数是当前元素idx和dom元素的索引。然后我们需要再次将这个dom元素传递给jquery选择器，这样我们就可以访问这个元素的jquery函数。是否有一个选项可以使它们按顺序排列，即：如果我在第一个选项上选择2，然后在第二个选项上选择3，然后在第三个选项上选择1，它将显示1-Text3 2-Text1 3-text2是的，您可以按顺序排列，有多种方法可以实现这一点。但是实现取决于您是否希望保留前面的功能，我是指demo 2，或者您希望它作为一个单独的实现……代码变得越来越复杂，如果可能的话，可以解释以下几行：var$el=$el；结果[10*$el.val+idx]，谢谢manit，太棒了，谢谢你了，如果可以一个接一个地打印结果，一旦我们选择了第一个选项，它将打印文本1，一旦我们选择了第二个选项，它将打印文本1和文本2，等等一个小问题，请问，我如何以内联html文本的形式显示代码？另一件事是，如果我选择了3个项目，那么我将返回以更正其中一个项目，它将显示4个已选择的项目，它不会仅更改值

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