javascript - JQuery 无法过滤我所有的依赖选择选项

Question

在我的依赖选项中有 4000 个选项，但 jquery 只能过滤前 1000 个数据。我对此很确定，因为我尝试更换数据位置。这是限制还是我编码错误？

带有 4000 选项的完整数据示例:https://jsfiddle.net/shahdavid999/ev8ksh0b/1/选择地区后，它将无法获取任何村庄:“Ramechhap(工作)”，此后不会显示任何选项。

使用JQuery JS过滤数据:

function checkVillage() {    
    var curProject = parseInt($('#district').val());
    $('#village option').each(function () {
        var arrProjects = JSON.parse($(this).attr('data-id'));
        if ($.inArray(curProject, arrProjects) > -1) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
    if ($('#village :selected').is(':hidden')) {
        $('#village').val('');
    }
}
$('#district').on('change', function() {
    checkVillage();
});

Answer 1

浏览器 DOM 自动绑定(bind)前 1000 个选项，因此如果您尝试隐藏/显示它将仅适用于前 1000 个选项。

因为解决方法必须仅使用过滤后的选项填充选择，而不是隐藏所有选项并显示过滤后的选项。

要执行此操作，请隐藏village选择并添加一个空选择filtered仅用过滤后的内容填充它，您可以使用选择器进行比我增强的循环更好的过滤你的代码。

But still I don't suggest to have a huge select better to handle them with ajax and to get only the filter options to the page

这是示例代码:

$(function(){
$("#village ").hide();
});


function checkVillage() {
$("#filtered").html($("#village option[data-id='[" + $('#district').val() + "]"));
if ($('#village :selected').is(':hidden')) {
        $('#village').val('');
    }
}
$('#district').on('change', function() {
    checkVillage();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
District
<select id="district" name="d" required >
<option value="">select</option>
<option value="61">Rukum</option>
<option value="62">Salyan</option>
<option value="63">Rolpa</option>
<option value="64">Pyuthan</option>
<option value="65">Dang</option></select>
</select>
<br><br>
Village
<select id="village" name="v" required>
<option data-id="[61]" value="3286">Gotamkot</option>
<option data-id="[61]" value="3287">Ghetma</option>
<option data-id="[61]" value="3288">Hukam</option>
<option data-id="[61]" value="3290">Jhula</option>
<option data-id="[61]" value="3291">Kanda</option>
<option data-id="[61]" value="3293">Khara</option>
<option data-id="[61]" value="3294">Kholagaun</option>
<option data-id="[61]" value="3295">Kol</option>
<option data-id="[61]" value="3297">Magma</option>
<option data-id="[61]" value="3298">Mahat</option>
<option data-id="[61]" value="3299">Morawang</option>
<option data-id="[61]" value="3301">Musikot Khalanga</option>
<option data-id="[61]" value="3302">Nuwakot</option>
<option data-id="[61]" value="3304">Pokhara</option>
<option data-id="[61]" value="3305">Purtim Kanda</option>
<option data-id="[61]" value="3307">Pyugha</option>
<option data-id="[61]" value="3308">Rangsi</option>
<option data-id="[61]" value="3310">Rugha</option>
<option data-id="[61]" value="3311">Sankha</option>
<option data-id="[61]" value="3312">Simli</option>
<option data-id="[61]" value="3313">Sisne</option>
<option data-id="[61]" value="3315">Syalakhadi</option>
<option data-id="[61]" value="3316">Syalapakha</option>
<option data-id="[61]" value="3275">Aathbis Dandagaun</option>
<option data-id="[61]" value="3277">Arma</option>
<option data-id="[61]" value="3278">Baphikot</option>
<option data-id="[61]" value="3279">Bhalakachha</option>
<option data-id="[61]" value="3280">Bijeswori (Chaurjhari)</option>
<option data-id="[61]" value="3282">Chaukabang</option>
<option data-id="[61]" value="3283">Chunwang</option>
<option data-id="[61]" value="3284">Duli</option>
<option data-id="[61]" value="3276">Aathbis Kot</option>
<option data-id="[61]" value="3281">Chhiwang</option>
<option data-id="[61]" value="3285">Garayala</option>
<option data-id="[61]" value="3289">Jangh</option>
<option data-id="[61]" value="3292">Kankri</option>
<option data-id="[61]" value="3296">Kotjahari</option>
<option data-id="[61]" value="3300">Muru</option>
<option data-id="[61]" value="3303">Pipal</option>
<option data-id="[61]" value="3306">Pwang</option>
<option data-id="[61]" value="3309">Ranmamaikot</option>
<option data-id="[61]" value="3314">Sobha</option>
<option data-id="[61]" value="3317">Taksera</option>

<option data-id="[62]" value="3177">Badagaun</option>
<option data-id="[62]" value="3178">Bafukhola</option>
<option data-id="[62]" value="3179">Bajh Kanda</option>
<option data-id="[62]" value="3180">Bangad Bame</option>
<option data-id="[62]" value="3181">Bhalchaur</option>
<option data-id="[62]" value="3182">Chande</option>
<option data-id="[62]" value="3183">Chhayachhetra</option>
<option data-id="[62]" value="3184">Damachaur</option>
<option data-id="[62]" value="3185">Dadagaun</option>
<option data-id="[62]" value="3186">Darmakot</option>
<option data-id="[62]" value="3187">Devsthal</option>
<option data-id="[62]" value="3188">Ghanjari Pipal</option>
<option data-id="[62]" value="3189">Dhakadam</option>
<option data-id="[62]" value="3190">Dhanbang</option>
<option data-id="[62]" value="3191">Hiwalcha</option>
<option data-id="[62]" value="3192">Korbang Jhimpe</option>
<option data-id="[62]" value="3193">Jimali</option>
<option data-id="[62]" value="3194">Kabhrechaur</option>
<option data-id="[62]" value="3195">Kajeri (Malneta)</option>
<option data-id="[62]" value="3196">Kalagaun</option>
<option data-id="[62]" value="3197">Kalimati Kalche</option>
<option data-id="[62]" value="3198">Karagithi</option>
<option data-id="[62]" value="3199">Kavra</option>
<option data-id="[62]" value="3200">Khalanga</option>
<option data-id="[62]" value="3201">Kotbara</option>
<option data-id="[62]" value="3202">Ktmoula</option>
<option data-id="[62]" value="3203">Kubhinde Daha</option>
<option data-id="[62]" value="3204">Laxmipur</option>
<option data-id="[62]" value="3205">Lekhpokhara</option>
<option data-id="[62]" value="3206">Majh Kharka</option>
<option data-id="[62]" value="3207">Marke</option>
<option data-id="[62]" value="3208">Marmapari Kanda</option>
<option data-id="[62]" value="3209">Mulkhola</option>
<option data-id="[62]" value="3211">Phalabang</option>
<option data-id="[62]" value="3212">Pipal Neta</option>
<option data-id="[62]" value="3213">Kalimati Rampur</option>
<option data-id="[62]" value="3214">Rim</option>
<option data-id="[62]" value="3215">Saijuwal Takura</option>
<option data-id="[62]" value="3216">Sarpani Garpa</option>
<option data-id="[62]" value="3217">Sibaratha</option>
<option data-id="[62]" value="3218">Siddheswor</option>
<option data-id="[62]" value="3219">Singwang</option>
<option data-id="[62]" value="3220">Suikot</option>
<option data-id="[62]" value="3221">Syanikhal</option>
<option data-id="[62]" value="3222">Tharmare</option>
<option data-id="[62]" value="3223">Tribeni</option>
<option data-id="[62]" value="4137">Nigalchula</option>

<option data-id="[63]" value="3224">Ares</option>
<option data-id="[63]" value="3225">Bhawang</option>
<option data-id="[63]" value="3226">Bhirul</option>
<option data-id="[63]" value="3228">Dhawang</option>
<option data-id="[63]" value="3229">Dubidada</option>
<option data-id="[63]" value="3230">Dubring</option>
<option data-id="[63]" value="3232">Fagaam</option>
<option data-id="[63]" value="3233">Gaam</option>
<option data-id="[63]" value="3235">Gairigaun</option>
<option data-id="[63]" value="3236">Ghartigaun</option>
<option data-id="[63]" value="3237">Ghodagaun</option>
<option data-id="[63]" value="3239">Harjung</option>
<option data-id="[63]" value="3240">Jedwang</option>
<option data-id="[63]" value="3242">Jankot</option>
<option data-id="[63]" value="3243">Jauli Pokhari</option>
<option data-id="[63]" value="3244">Jelwang</option>
<option data-id="[63]" value="3245">Jhenam</option>
<option data-id="[63]" value="3247">Jungar</option>
<option data-id="[63]" value="3248">Korchawang</option>
<option data-id="[63]" value="3249">Kareti</option>
<option data-id="[63]" value="3251">Khungri</option>
<option data-id="[63]" value="3252">Kotgaun</option>
<option data-id="[63]" value="3253">Kureli</option>
<option data-id="[63]" value="3255">Masina</option>
<option data-id="[63]" value="3256">Mijhing</option>
<option data-id="[63]" value="3258">Pachhaiwang (Ghartigaun)</option>
<option data-id="[63]" value="3259">Pakhapani</option>
<option data-id="[63]" value="3260">Pang</option>
<option data-id="[63]" value="3262">Rangsi</option>
<option data-id="[63]" value="3263">Rank</option>
<option data-id="[63]" value="3264">Sakhi</option>
<option data-id="[63]" value="3266">Sirpa</option>
<option data-id="[63]" value="3267">Siuri</option>
<option data-id="[63]" value="3269">Tewang</option>
<option data-id="[63]" value="3270">Thawang</option>
<option data-id="[63]" value="3271">Uwa</option>
<option data-id="[63]" value="3273">Whama</option>
<option data-id="[63]" value="3274">Wot</option>
<option data-id="[63]" value="3227">Budagaun</option>
<option data-id="[63]" value="3231">Eriwang</option>
<option data-id="[63]" value="3234">Gajul</option>
<option data-id="[63]" value="3238">Gumchal</option>
<option data-id="[63]" value="3241">Jaimakasala</option>
<option data-id="[63]" value="3246">Jinawang</option>
<option data-id="[63]" value="3250">Khumel</option>
<option data-id="[63]" value="3254">Liwang</option>
<option data-id="[63]" value="3257">Nuwagaun</option>
<option data-id="[63]" value="3261">Rangkot</option>
<option data-id="[63]" value="3265">Seram</option>
<option data-id="[63]" value="3268">Talawang</option>
<option data-id="[63]" value="3272">Wadachaur</option>

<option data-id="[64]" value="3128">Akhra</option>
<option data-id="[64]" value="3129">Badikot</option>
<option data-id="[64]" value="3130">Bangesal</option>
<option data-id="[64]" value="3131">Baraula</option>
<option data-id="[64]" value="3132">Barjiwang</option>
<option data-id="[64]" value="3133">Belwas</option>
<option data-id="[64]" value="3134">Bhingri</option>
<option data-id="[64]" value="3135">Bijaya Nagar</option>
<option data-id="[64]" value="3136">Bijubar</option>
<option data-id="[64]" value="3137">Bijuli</option>
<option data-id="[64]" value="3138">Chuja (Muna)</option>
<option data-id="[64]" value="3139">Damri</option>
<option data-id="[64]" value="3140">Dangbang</option>
<option data-id="[64]" value="3141">Dankhakwadi</option>
<option data-id="[64]" value="3142">Dharampani</option>
<option data-id="[64]" value="3143">Dharmawati</option>
<option data-id="[64]" value="3144">Dhobaghat(Udaypurkot)</option>
<option data-id="[64]" value="3145">Dhowang</option>
<option data-id="[64]" value="3146">Dhungegadi</option>
<option data-id="[64]" value="3147">Gothiwang</option>
<option data-id="[64]" value="3148">Hansapur</option>
<option data-id="[64]" value="3149">Jumrikanda</option>
<option data-id="[64]" value="3150">Khaira</option>
<option data-id="[64]" value="3151">Khawang</option>
<option data-id="[64]" value="3152">Khung</option>
<option data-id="[64]" value="3153">Kochiwang</option>
<option data-id="[64]" value="3154">Ligha</option>
<option data-id="[64]" value="3155">Liwang</option>
<option data-id="[64]" value="3156">Lung</option>
<option data-id="[64]" value="3157">Manjhakot</option>
<option data-id="[64]" value="3158">Maranthana</option>
<option data-id="[64]" value="3159">Markawang</option>
<option data-id="[64]" value="3160">Narikot</option>
<option data-id="[64]" value="3161">Naya Gaun</option>
<option data-id="[64]" value="3162">Okharkot</option>
<option data-id="[64]" value="3163">Pakala</option>
<option data-id="[64]" value="3164">Phopli</option>
<option data-id="[64]" value="3165">Puja</option>
<option data-id="[64]" value="3166">Pyuthan Khalanga</option>
<option data-id="[64]" value="3167">Rajbara</option>
<option data-id="[64]" value="3168">Ramdi</option>
<option data-id="[64]" value="3169">Ruspur Kot</option>
<option data-id="[64]" value="3170">Sari</option>
<option data-id="[64]" value="3171">Syauliwang</option>
<option data-id="[64]" value="3172">Swargadwari</option>
<option data-id="[64]" value="3173">Torwang</option>
<option data-id="[64]" value="3174">Tiram</option>
<option data-id="[64]" value="3175">Tusara</option>
<option data-id="[64]" value="3176">Wangemaroth</option>

<option data-id="[65]" value="3088">Shantinagar (Amritpur)</option>
<option data-id="[65]" value="3089">Baghmare</option>
<option data-id="[65]" value="3090">Bela</option>
<option data-id="[65]" value="3091">Bijauri</option>
<option data-id="[65]" value="3092">Chaulahi</option>
<option data-id="[65]" value="3093">Dhanori</option>
<option data-id="[65]" value="3094">Dharna</option>
<option data-id="[65]" value="3095">Dhikpur</option>
<option data-id="[65]" value="3096">Duruwa</option>
<option data-id="[65]" value="3097">Gabardiya</option>
<option data-id="[65]" value="3098">Gadhawa</option>
<option data-id="[65]" value="3099">Gangapraspur</option>
<option data-id="[65]" value="3100">Goltakuri</option>
<option data-id="[65]" value="3101">Halwar</option>
<option data-id="[65]" value="3102">Hansipur</option>
<option data-id="[65]" value="3103">Hapur (Basantpur)</option>
<option data-id="[65]" value="3104">Hekuli</option>
<option data-id="[65]" value="3105">Kabhre</option>
<option data-id="[65]" value="3106">Koilabas</option>
<option data-id="[65]" value="3107">Lalmatiya</option>
<option data-id="[65]" value="3108">Laxmipur</option>
<option data-id="[65]" value="3109">Loharpani</option>
<option data-id="[65]" value="3110">Manpur</option>
<option data-id="[65]" value="3111">Narayanpur</option>
<option data-id="[65]" value="3112">Panchakule</option>
<option data-id="[65]" value="3113">Pawan Nagar</option>
<option data-id="[65]" value="3114">Phulbari</option>
<option data-id="[65]" value="3115">Purandhara</option>
<option data-id="[65]" value="3116">Rajpur</option>
<option data-id="[65]" value="3117">Rampur</option>
<option data-id="[65]" value="3118">Saidha</option>
<option data-id="[65]" value="3119">Satbariya</option>
<option data-id="[65]" value="3120">Saudiyar</option>
<option data-id="[65]" value="3121">Sisahaniya</option>
<option data-id="[65]" value="3122">Sonpur</option>
<option data-id="[65]" value="3123">Syuja</option>
<option data-id="[65]" value="3124">Tarigaun</option>
<option data-id="[65]" value="3125">Tribhuvan Nagar Municipality</option>
<option data-id="[65]" value="3126">Tulsipur Municipality</option>
<option data-id="[65]" value="3127">Urahari</option>
<option data-id="[65]" value="4138">Sreegaun</option>
</select> 
<select id="filtered"></select>