0

こんにちは、もう一度質問して申し訳ありませんが、ペアの2番目の選択の値を変更するjqueryがあります.hide .showのさまざまなバージョンを使用して仕事をしようとしたため、現在次のコードを使用していますすでにバリエーションを使用しているため、干渉が発生しますが、これは使用しているコードです

jQuery.fn.filterOn = function(selectFrom, values) {
    return this.each(function() {
        var select = this;
        var options = [];
        $(select).find('option').each(function() {
            $(this).attr("title");
        });
        $(select).data('options', options);
        console.log(selectFrom);
        $(selectFrom).change(function() {
            var options = $(select).empty().data('options');
            var haystack = values[$(this).val()];
            console.log(haystack);
            $.each(options, function(i) {
                var option = options[i];
                if($.inArray(option.value, haystack) !== -1) {
                    $(select).append(
                    $('<option>').text(option.text).val(option.value)
                    );
                }
            });
        });            
    });
};

$(function() {
    $('#city').filterOn('#country', {
        'default': [],
        'LK':['LK'],'SY':['SY'],'KE':['KE']

         });
});

次に、これが 2 つの選択の外観です。最初の選択には 155 の値があり、2 番目の選択には 16000 を超える値があることに注意してください。

<select id="country" name="country">
 <option value="">---------</option>
 <option value="LK">Sri Lanka</option>
 <option value="SY">Syria</option>
 <option value="KE">Kenya</option>.......
</select>

<select id="city" name="city">
 <option value="">---------</option>
 <option title="LK" value="1252211">Ahangama</option>
 <option title="LK" value="1252196">Ahungalla</option>
 <option title="LK" value="8100176">Ahungalle</option>
 <option title="LK" value="1251081">Anuradhapura</option>
 <option title="LK" value="1250308">Bandarawela</option>
 <option title="LK" value="1249978">Bentota</option>
 <option title="LK" value="8100177">Beruwela</option>
 <option title="LK" value="1248991">Colombo</option>
 <option title="LK" value="1248750">Dambulla</option>
 <option title="LK" value="8202608">Dickwella</option>
 <option title="LK" value="8208032">Embilipitiya</option>
 <option title="LK" value="1224688">Wadduwa</option>
 <option title="LK" value="1223738">Weligama</option>
 <option title="SY" value="170063">Aleppo</option>
 <option title="SY" value="8100417">Bloudan</option>......
</select>

これはすべて機能しますが、push im を使用すると、2 番目の選択を再配置してタイトル値を値として持つと想定されるため、必要な数値の代わりに lk と表示されます。異なる .hide .show でいくつかの試行を試みましたが、これらの 2 つの選択が jquery hide show を使用しているスパン内に含まれているため、どれもうまくいかないようです。それが子要素の非表示表示に影響するかどうかはわかりませんが、どのように機能するかわかりません。カスケード選択に関する他の議論も見ましたが、私の問題に対する解決策が見つかりません。

4

1 に答える 1

1

まず、選択した値に基づいてデータを取得するために ajax などを使用することをお勧めします。しかし、提示したコードの何が問題なのかを知りたい場合は、いくつかのことがあります。

    var options = [];
    $(select).find('option').each(function() {
        $(this).attr("title");
    });
    $(select).data('options', options);

ここでは、空の配列を定義してから、すべてのオプションを反復処理し、それらのいずれにも何もしません ( $(this).attr("title");title 属性の値を返しますが、何もしません)。次に、のoptionsデータ要素をselect空の配列に設定します。あなたがやりたいことはもっと似ていると思います：

    var options = [];
    $(select).find('option').each(function() {
        options.push(this);
    });
    $(select).data('options', options);

これにより、16,000 個optionの要素すべてがデータ キャッシュに格納されます。より良いオプションは次のとおりだと思います。

    var options = {};
    $(select).find('option').each(function() {
        var $o = $(this), title = $o.attr('title');
        if (options.hasOwnProperty(title) === false) {
            options[title] = [];
        }
        options[title].push({ 'text': $o.text(), 'value': $o.val() });
    });
    $(select).data('options', options);

今、変更機能でこれを行うことができます：

    $(selectFrom).change(function() {
        var $select = $(select),
            options = $select.empty().data('options')[$(this).val()];
        // options is now just an array of objects with value and text properties, so:
        $.each(options, function () {
            $('<option value="' + this.value + '">' + this.text + '</option>').appendTo($select);
        });
    });

そうすれば、DOM 要素全体をメモリに保存するのではなく、関連情報のみを保存できます。それが役立つことを願っています。

于 2012-08-15T16:07:57.253 に答える