Question

当选择了某个选项时，此Dropkick change函数会更新另一个<select>元素的值。我在300多对<select>元素上使用该函数，所以我很乐意修改函数，以免需要为每个元素指定选择器。

由于元素不是彼此相邻，我想合并这个方法来获取与所选输入的id stackoverflow.com/a/7734190/1056713

同名的下一个元素

编辑 - 为了简化此发布的示例，我使用了这些元素的通用名称和ID，但第二个元素的名称将匹配第一个元素的id。

此功能的工作示例发布在此处：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>

Answer 1

以下更新 （问题已更新）

原始回答：

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

但是使用该信息，您可以从id获取this[0]，并通过删除所有非数字并解析它来获取id中的数字，如下所示：

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

然后，当然，只需添加一个即可获得下一个选择，所以：

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

Updated Fiddle

或者，您可以在每个选择上使用data-*属性来指示它应该使用的其他选项，但如果您总是按升序对它们进行编号，则可能比它的价值更麻烦。< / p>

更新：重新编辑：

...但第二个元素的名称将匹配第一个元素的id

这样可以更轻松，您可以使用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);
    }
});

Updated Fiddle

修改此更改函数以使用（this）和与（this）的id同名的下一个元素

1 个答案: