0

选择选项时,此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>         
4

1 回答 1

1

下面更新 (问题已更新)

原始答案

奇怪的是,thischange回调中不是选择元素,它是一个数组,其中select元素似乎是第一个条目。这很奇怪。

但是使用该信息,您可以通过删除所有非数字并解析它来获取idfromthis[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);
    }
});

更新小提琴

或者,您可以data-*在每个选择上使用一个属性来指示它应该使用的另一个选择是什么,但如果您总是按升序对它们进行编号,那么这可能比它的价值更麻烦。


更新:重新编辑:

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

这使得它更容易,你可以只使用一个属性选择器

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

更新小提琴

于 2013-03-27T08:53:56.163 回答