Solution 1 :

The browser DOM automatically binds the first 1000 option, So if you are trying to hide/show it will be applicable only on the first 1000 option.

As workaround has to fill the select with only the filtered options not hide all and show the filtered.

To do this hide the village select and add an empty select filtered only fill it with the filtered and you can use a selector to filter better than the loop I enhanced your code.

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

This is a sample code:

$(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>

Problem :

In my dependent option there is 4000 option but jquery is only able to filter first 1000 data. I was sure about this because i tried by replacing the data position. Is this limitation or am I coding it wrong ?

Full data example with 4000 option : https://jsfiddle.net/shahdavid999/ev8ksh0b/1/ it won’t be able to fetch any Village after selecting District: “Ramechhap (working)” after this not any option are shown.

Used JQuery JS to filter data:

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

Comments

Comment posted by Nick

It’s working for me. I can select e.g. District Bhaktapur and Village Tathali

Comment posted by ArBn

@Nick thank you for the comment. But in my browser it not working is this really browser issue or ram, storage, cache anything ?

Comment posted by gforce301

The first thing I would do is NOT put 4000 options that I don’t want to show into a select element. Store the data for the options in an object and then dynamically create just the options you want to show based on the other select element.

Comment posted by Nick

Have you checked the console to see if you get any error messages? I’m running on a big system (64GB RAM) so that might make a difference

Comment posted by ArBn

@Nick Thank you for suggestion. I dont have any idea about console in jsfiddle. I will try making object thank you very much

Comment posted by ArBn

Can we select specific value in filtered select ?

Comment posted by Basil

You have to keep in your mind now the select which the user will select is #filtered not village so you just call the full list as #fullvillages and the filtered as #village

By