मैं सोच रहा था कि ऐसा कुछ शुद्ध जेएस का उपयोग करके या jQuery का उपयोग करके कैसे काम करेगा (मुझे लगता है कि यदि संभव हो तो jQuery के माध्यम से यह तेजी से किया जाएगा?) यदि मेरे पास एक चुनिंदा ड्रॉप डाउन सूची है और उपयोगकर्ता उस विकल्प के आधार पर एक विकल्प चुनता है, तो अगली ड्रॉप डाउन सूची में केवल कुछ विकल्प सक्षम होते हैं।

उदाहरण के लिए, मैं ओंटारियो में एक कार्यक्रम में भाग ले रहा हूँ:

<select name="select_province_dropdown" id="select_province_dropdown" size="1" style="width: 183px;">
    <option value="----Select Province----">----Select Province----</option>
    <option value="AB">AB</option>
    <option value="BC">BC</option>
    <option value="MB">MB</option>
    <option value="NL">NL</option>
    <option value="NS">NS</option>
    <option value="ON">ON</option>
    <option value="PE">PE</option>
    <option value="SK">SK</option>
</select>

<select name="venue_dropdown" id="venue_dropdown" size="1" style="width: 274px;">
    <option value="----Select Venue----">----Select Venue----</option>
    <option value="Toronto West">Toronto West</option>
    <option value="Vancouver">Vancouver</option>
    <option value="Edmonton">Edmonton</option>
    <option value="Toronto East">Toronto East</option>
</select>

तो उपरोक्त एचटीएमएल का उपयोग करके, मैं ओन्टारियो के लिए "चालू" का चयन करूंगा, और उसके बाद केवल टोरंटो वेस्ट और टोरंटो ईस्ट को दिखाना या सक्षम होना चाहिए। चयनित विकल्पों को किसी अन्य अतिरिक्त क्षेत्रों में प्रदर्शित करने की आवश्यकता नहीं है, उपयोगकर्ता को केवल चयन करने और फिर फॉर्म में आगे बढ़ने की आवश्यकता है। मेरी चिंता यह है कि अगर मेरे पास देश भर में 300 कार्यक्रम हैं जो अक्षम विकल्पों के साथ भी जाने के लिए एक लंबी सूची होगी।

मैंने क्या कोशिश की: JSFiddle

मैंने जो कोशिश की है, उसके साथ मैंने जो मुद्दा देखा है, वह यह है कि बहुत सारे && कथन होंगे ... यह काम करता है लेकिन जब मेरे पास ३०, ५०, १००+ ईवेंट होते हैं तो मुझे नहीं लगता कि यह आदर्श होगा, मैं भी नहीं अगर मैं इसका इस्तेमाल करता हूं तो मुझे नहीं पता कि और क्या डालना है।

---पृष्ठभूमि की जानकारी---

एक छोटी सी पृष्ठभूमि की जानकारी के रूप में मैं यह कोशिश क्यों करना चाहता हूं अगर कोई सोच रहा है। मेरे पास अंततः 170-200 स्थान होंगे और मुझे लगता है कि हमारे उपयोगकर्ताओं के लिए प्रांत के आधार पर विकल्पों को अक्षम करके सही स्थान का चयन करना आसान है। मूल रूप से मैंने स्थानों के लिए अलग selects बनाए थे और फिर उन सभी को छिपा दिया था, और उस प्रांत से जुड़ी घटनाओं के साथ आपने किस प्रांत को select चुना था, उसके आधार पर खुद को प्रकट करेगा।

उसके लिए मेरे पास जेएस है:

$('#select_province_dropdown').on('change', function() {
    if ($("#select_province_dropdown").val() === "AB") {
        $(".hideAB").attr("style", "display: block;");
    } else {
        $(".hideAB").attr("style", "display: none;");
    }
});

अब मुद्दा यह है कि हम जिस सीएमएस का उपयोग कर रहे हैं, वह हमारे द्वारा अपनी रिपोर्ट के लिए बनाए जा सकने वाले कस्टम फ़ील्ड की मात्रा को सीमित करता है, और जो इस समय बजट में नहीं है, उसे बढ़ाने के लिए हमें (बहुत अधिक) भुगतान करना होगा। इसलिए जबकि यह विधि मेरे लिए समझने में सरल और आसान है, मुझे लगता है कि ऊपर की दूसरी विधि मैं यह पता लगाने की कोशिश कर रहा हूं कि कैसे करना है बेहतर लागत के अनुसार क्योंकि तब हमारे पास केवल दो कस्टम फ़ील्ड (दो चयन) हैं जो कंपनी के पैसे बचाते हैं कि मैं नहीं चाहता कि वे सिर्फ इसलिए खर्च करें क्योंकि मैं एक ऐसा नोब हूं, मैं चाहता हूं कि वे अतिरिक्त कस्टम फ़ील्ड के लिए कुछ और महत्वपूर्ण भुगतान करें।

0
SorryEh 29 मार्च 2018, 18:01

3 जवाब

अगर मैं आवश्यकता और बाधाओं को सही ढंग से समझता हूं, और @ जोश क्रोनिन के समाधान पर निर्माण कर रहा हूं ...

आप सक्षम/अक्षम करने के बजाय #venue_dropdown विकल्पों को दिखाने/छिपाने पर विचार कर सकते हैं।

कोड काफी सीधा है ...

jQuery(function($) {
    var $venue_dropdown = $('#venue_dropdown');
    $('#select_province_dropdown').on('change', function() {
        $venue_dropdown.get(0).selectedIndex = 0; // select the ----Select Venue---- option
        $venue_dropdown.find('option')
        .not(':first') // ignore the ----Select Venue---- option
        .hide() // hide all venue options
        .filter("[data-for='" + $(this).val() + "']") // select venues in the selected Province
        .show(); // show selected venues
    }).trigger('change'); // initialise #venue_dropdown in accordance with #select_province_dropdown's initial selection
});

DEMO

IMHO यह एक बेहतर उपयोगकर्ता अनुभव प्रदान करेगा, खासकर यदि स्थानों की सूची लंबी है।

0
Roamer-1888 29 मार्च 2018, 20:12

अपने सभी स्थल स्थानों पर एक वर्ग निर्धारित करें जो उस प्रांत से मेल खाता हो जिसमें वे स्थित हैं:

<option class="ON" value="Toronto West">Toronto West</option>

जब आप एक प्रांत का चयन करते हैं तो मूल्य खींचें, सभी स्थानों को अक्षम करें, फिर केवल उन स्थानों को पुनः सक्षम करें जिनमें विकल्प मान से मेल खाने वाली कक्षा है।

1
Culyx 29 मार्च 2018, 15:16

आप प्रत्येक विकल्प में 'ऑनक्लिक' फ़ंक्शन का उपयोग कर सकते हैं।

    <option onclick='show(this)' data-id1='AB' value="AB">AB</option>

फिर आपका 'शो फंक्शन' दूसरे मेनू को "id='whatever'" to . विकल्प के साथ सेट करेगा

    style='display:block'

जहां इसे पहले प्रदर्शित करने के लिए सेट किया गया था: कोई नहीं मुझे आशा है कि यह सरल समाधान आपकी मदद करेगा।

1
Sheepherder 29 मार्च 2018, 15:13