Question

嗨大家好抱歉再次问这个，但我有一些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的范围内。不知道这是否会影响儿童元素的隐藏节目，但我不能让它工作应该如何。我也看了一些关于级联选择的其他讨论，但无法找到我的问题的任何解决方案。

Answer 1

首先，我建议使用ajax或类似的东西来获取基于所选值的数据。但是，如果你想知道你所呈现的代码有什么问题，那么有几件事情：

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

这里你已经定义了一个空数组，然后遍历所有选项，对它们中的任何一个都不执行任何操作（$(this).attr("title");返回title属性的值，但是你没有对它做任何事情）。然后将options的{{1}}数据元素设置为空数组。我想你想做的更像是：

select

这会将所有16,000个var options = []; $(select).find('option').each(function() { options.push(this); }); $(select).data('options', options);元素存储在数据缓存中。我认为更好的选择可能是：

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);

这样你就不会将整个DOM元素存储在内存中，而只是存储相关信息。希望有所帮助。

jquery选择指向title而不是value的链接

1 个答案: