修改此更改函数以使用(this)和与(this)的id同名的下一个元素 [英] Modify this change function to use (this) and the next element with same name as the id of (this)

问题描述

此 Dropkick change函数在有选项时会更新另一个<select>元素的值被选中.我在300多对<select>元素上使用了该函数，所以我很想修改该函数，以免要求为每个元素指定选择器.

This Dropkick change function updates the value of another <select> element when an option is selected. I'm using the function on 300+ pairs of <select> elements so I'd love to modify the function so as not to require specifying the selectors for each element.

由于元素不是彼此相邻放置的，所以我想合并此方法以获取与所选输入的ID同名的下一个元素.stackoverflow.com/a/7734190/1056713

Since the elements aren't positioned next to each other, I'd like to incorporate this method for getting the next element with same name as the id of the selected input stackoverflow.com/a/7734190/1056713

编辑-为了简化本示例，我为这些元素使用了通用名称和ID，但第二个元素的名称将与第一个元素的ID匹配.

EDIT - In order to simplify the example for this posting I've used a generic name and id for these elements, but the name of the 2nd element would match the id of the 1rst element.

此函数的工作示例发布在这里: http://jsfiddle.net/chayacooper/yhAX5/6/

A working example of the function is posted here: http://jsfiddle.net/chayacooper/yhAX5/6/

JS

$('#Select1').dropkick({
    change: function(value) {
        var $select2 = $('#Select2');
        removeDefaultFromSelect($select2);
        $select2.val(value);
    }
});

HTML

<!-- Dropkick styled select element -->
<select name="DropkickSelect" id="Select1" class="dropkick">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select> 

<!-- Element who's value will be set  -->
<select name="Select1" id="Select2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>         

推荐答案

下面更新 (问题已更新)

原始答案:

奇怪的是，change回调中的this不是select元素，它是一个数组，其中select元素似乎是第一个条目.真是奇怪.

Oddly, this in the change callback isn't the select element, it's an array in which the select element seems to be the first entry. That's quite odd.

但是使用这些信息，您可以通过删除所有非数字并进行解析来从this[0]中获取id，并从id中获取数字，如下所示:

But using that information, you can get the id from this[0] and get the number from the id by removing all non-digits and parsing it, like this:

var idnum = parseInt(this[0].id.replace(/\D/g, ''), 10);

然后，当然，只需向其中添加一个即可获得下一个选择，所以:

Then, of course, just add one to it to get the next select, so:

$('selector for the dropkick things to hook up').dropkick({
    change: function(value) {
        var idnum = parseInt(this[0].id.replace(/\D/g, ''), 10) + 1;
        var $nextSelect = $('#Select' + idnum);
        removeDefaultFromSelect($nextSelect);
        $nextSelect.val(value);
    }
});

更新了小提琴

或者，您可以在每个选择项上使用data-*属性，以指示该选择项应使用的另一个选择项，但是如果您始终按升序对它们进行编号，则可能会麻烦多于其应有的价值.

Alternately, you could use a data-* attribute on each select to indicate what the other select it should use is, but if you're always numbering them in ascending order, that's probably more trouble than it's worth.

更新:重新

...但是第二个元素的名称将与第一个元素的ID相匹配

...but the name of the 2nd element would match the id of the 1rst element

这使它变得更加容易，您可以使用属性选择器:

That makes it even easier, you can just use an attribute selector:

$('selector for the dropkick things to hook up').dropkick({
    change: function(value) {
        var $nextSelect = $('select[name="' + this[0].id + '"]');
        removeDefaultFromSelect($nextSelect);
        $nextSelect.val(value);
    }
});

更新了小提琴

这篇关于修改此更改函数以使用(this)和与(this)的id同名的下一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！