0

このDropkick change関数<select>は、オプションが選択されたときに別の要素の値を更新します。300以上の要素のペアで関数を使用している<select>ので、各要素のセレクターを指定する必要がないように関数を変更したいと思います。

要素が隣り合って配置されていないため、選択した入力のIDと同じ名前の次の要素を取得するためにこのメソッドを組み込みますstackoverflow.com/a/7734190/1056713

編集-この投稿の例を簡略化するために、これらの要素に一般的な名前とIDを使用しましたが、2番目の要素の名前は最初の要素の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

以下の更新 （質問が更新されました）

元の答え：

奇妙なことにthis、changeコールバックではselect要素ではなく、要素selectが最初のエントリであるように見える配列です。それはかなり奇妙です。

しかし、その情報を使用すると、次のように、すべての非数字を削除して解析することにより、idからthis[0]を取得し、から番号を取得できます。id

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

次に、もちろん、次の選択を取得するために1つ追加するだけです。

$('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-*各選択で属性を使用して、他の選択で使用する必要があるものを示すこともできますが、常に昇順で番号を付ける場合は、それだけの価値よりも問題が多い可能性があります。

更新：編集をやり直してください：

...ただし、2番目の要素の名前は1番目の要素の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 に答える