0

大家好，很抱歉再次问这个问题，但我有一些 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']

         });
});

那么这就是两个选择的样子记住第一个有 155 个值，第二个有超过 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 假设它重新排列第二个选择以将标题值作为值，所以它会说 lk 而不是它需要的数字。我尝试使用不同的 .hide .show 进行了几次尝试，但似乎都不起作用，这两个选择也位于使用 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 回答