javascript - How to create a set of dropdowns where the list reduces as you select? -

मेरे पास ऐसा HTML फार्म है:

सभी ड्रॉपडाउन में एक ही सूची है: विकल्प 1, विकल्प 2, विकल्प 3 और उपयोगकर्ता को प्रत्येक कुंजी के लिए एक मान चुनना होगा यह कोई चिंता नहीं के साथ काम करता है:

< P> हालांकि, मैं इसे बढ़ाने के लिए चाहता हूं दोनों कुंजी और विकल्प सूची अपेक्षाकृत बड़े हो सकते हैं (20 कहना)। एक-से-एक मैपिंग होने की उम्मीद है और आप दो स्थानों में मान का चयन नहीं कर सकते। लेकिन जब सूची बड़ी हो जाती है, तो गलती करना आसान होता है और दो जगहों में समान मूल्य का चयन होता है। डुप्लिकेट की जांच करने के लिए हम कुछ क्लाइंट-साइड सत्यापन करते हैं, लेकिन मैं एक यूज़र अनुभव को पसंद करता हूं जो अन्य ड्रॉपडाउन से चयनित विकल्प को हटा रहा है जैसे इसे फिर से चयन नहीं किया जा सकता । इस तरह से:

मैं कैसे कर सकता हूं इस बारे में जाना?

अंतिम समाधान

मैंने शुरुआत में नॉकआउट समाधान चुना था लेकिन दूसरे विचार पर, मैं रिक हिचकॉक की सादे JQuery समाधान पसंद करता था क्योंकि मैं आसानी से बिना कहीं भी इसे प्लग कर सकता हूं कोई अतिरिक्त सेटअप यहां बताया गया है कि रिक रिकवरी के समाधान को और अधिक पुन: प्रयोज्य बनाने के लिए कैसे संशोधित किया गया है:

  फ़ंक्शन कम करने वाले ड्रॉपडाउन (ड्रॉपडाउन सेलेक्टर) {var $ dropdowns = $ (dropDownSelector); $ Dropdowns.change (function () {// सबसे पहले सभी विकल्पों को सक्षम करें। $ Dropdowns.find ('option')। Prop ('disabled', false); // फिर प्रत्येक ड्रॉपडाउन के लिए, इसका वर्तमान मान और // अक्षम करें अन्य ड्रॉपडाउन में यह विकल्प। $ Dropdowns.each (फ़ंक्शन () {var $ currDropdown = $ (this); var currDropdownValue = $ currDropdown.val (); यदि (currDropdownValue! == '') {var $ otherDropdowns = $ dropdowns । ($ CurrDropdown); $ otherDropdowns.find ('विकल्प')। प्रत्येक (फ़ंक्शन () {var $ option = $ (this); var विकल्पआइतए पूर्व चयनित = $ option.val () === currDropdownValue; अगर (विकल्पआप पहले से चयनित) $ Option.prop ('अक्षम', सत्य);});}});}); }  

अब आप केवल अपने सभी संबंधित ड्रॉपडाउन को एक सामान्य वर्ग दे सकते हैं और कहीं भी इस तरह से कॉल कर सकते हैं:

  reducingDropdowns ('। MyDropdownClass' );  

मदद के लिए आप सभी को धन्यवाद।

पीएस: मुझे यह भी एहसास हुआ कि मेरे आवेदन के लिए, मैं उन विकल्प को अक्षम करना चाहता हूं जो पहले से ही इस्तेमाल किए गए थे उन्हें सूची से पूरी तरह से हटा दें।

आप उपयोग किए गए विकल्पों को इस तरह से छुपा सकते हैं: < $ ('Select')। (फ़ंक्शन () {var val = $} $ ('select')। (यह) .वल (); $ (यह)। साइबलिंग ('चयन') .फिन्ड ('विकल्प') .फिल्टर (फ़ंक्शन () {वापसी $ (यह) .val () === वैल एंड amp; $ (यह) .val ()! == '';}) .hide ();});});

---

वस्तुओं को हटाने का विकल्प उन्हें अक्षम करना है:

  $ ('चयन')। $ ('' विकल्प '')। ('अक्षम', गलत); $ ('चुनें')। प्रत्येक (फ़ंक्शन () {var val = $ (this) .val (); $ (यह)। साइबिंग ('चयन') .फिन्ड ('विकल्प') .फिल्टर (फ़ंक्शन () {वापसी $ (यह) .val () =) = val & amp; $ (this)। Val ()! == '';}) .prop ('अक्षम', सत्य);});});