<कई का चयन करें> - केवल एक आइटम का चयन करने की अनुमति कैसे दें?


134

मेरे पास <SELECT multiple>कई विकल्पों के साथ एक फ़ील्ड है और मैं इसे एक ही समय में केवल एक विकल्प चुनने की अनुमति देना चाहता हूं, लेकिन उपयोगकर्ता CTRL कुंजी पकड़ सकता है और एक ही बार में अधिक आइटम चुन सकता है।

वहाँ किसी भी तरह से यह कैसे करना है? (मैं 'मल्टीपल' नहीं निकालना चाहता)।


5
क्या? क्यों? इसके लिए और व्याख्या की जरूरत है।
दाई

5
अपने चयन के साथ कई का उपयोग नहीं करके? :)
गॉर्डन

5
@GordonM पूरी तरह से हाँ: पीआई आज उसी के लिए देख रहा था क्योंकि मैं कई आइटम दिखाना चाहता था (जो कि multipleविशेषता के साथ निहित है ) वास्तव में कई का चयन करने में सक्षम होने के बिना। भूल गए कि ऐसा करने की विशेषता को बुलाया गया था size, इसलिए शीर्ष उत्तर ने मुझे अच्छी तरह से सेवा दी :)
ल्यूक

मेरे पास व्यक्तिगत रूप से एक चयनित बहु क्षेत्र है जहां मेरे पास चार विकल्प हैं और मैं चाहता हूं कि तीन विकल्प चुने जा सकें लेकिन चौथे को अकेले चुना जाना चाहिए क्योंकि यह अन्य तीन (3 विकल्प) और "कोई नहीं" के साथ टकराएगा ")
22

जवाबों:


281

बस इसे कई का चयन न करें, लेकिन इसका आकार निर्धारित करें, जैसे:

  <select name="user" id="userID" size="3">
    <option>John</option>
    <option>Paul</option>
    <option>Ringo</option>
    <option>George</option>
  </select>

काम करने का उदाहरण: https://jsfiddle.net/q2vo8nge/


क्या आकार विशेषता में प्रोग्राम विकल्प की कुल संख्या को गिनना संभव है?
MyName

@ नताशा आप jquery का उपयोग करके आकार क्षेत्र का मूल्य पा सकते हैं :-)
व्लादिमीर verleg

आकार प्रासंगिक जानकारी: रखने selectएक अंदर display: flexकंटेनर, और कर flex-grow: 1पर selectइलाज करने के लिए यह कारण होगा size="3"कम से कम ऊंचाई के रूप में, और उसके बाद संभव अधिकतम आकार अपने कंटेनर के भीतर करने के लिए पूरे चयन की ऊंचाई स्नैप करें। jsfiddle.net/z1gypahs
Torxed

25

यदि उपयोगकर्ता को एक बार में केवल एक विकल्प का चयन करना चाहिए, तो बस "एकाधिक" को हटा दें - एक सामान्य चयन करें:

  <select name="mySelect" size="3">
     <option>Foo</option>
     <option>Bar</option>
     <option>Foo Bar</option>
     <option>Bar Foo</option>
  </select>

बेला


9

आप multipleविशेषता को क्यों नहीं निकालना चाहते हैं ? उस विशेषता का संपूर्ण उद्देश्य ब्राउज़र को निर्दिष्ट करना है कि दिए गए selectतत्व से कई मानों का चयन किया जा सकता है । यदि केवल एक मान का चयन किया जाना चाहिए, तो विशेषता को हटा दें और ब्राउज़र केवल एक चयन की अनुमति देने के लिए जान जाएगा।

आपके पास जो उपकरण हैं, उनका उपयोग करें, यही वे लिए हैं।


1
आह। आकार विशेषता भी स्टैंडअलोन काम करती है। ध्यान नहीं दिया। धन्यवाद
simPod

6
@simPod का तर्क है क्योंकि कई बार ग्राहकों को उनके सामने सभी विकल्पों को देखने की जरूरत होती है, लेकिन उनमें से केवल 1 को ही चुन सकते हैं। जब से मैंने "वास्तविक" html लिखा है, तब तक बहुत समय हो चुका है, जब मुझे उत्तर को Google / bing करना पड़ा ... ओह कुछ दिनों के लिए StackOverflow के लिए स्वर्ग धन्यवाद।
रिचर्ड बी

1

आप डिफ़ॉल्ट रूप से केवल एक विकल्प चाहते हैं, लेकिन उपयोगकर्ता CTRL कुंजी दबाकर कई विकल्पों का चयन कर सकता है। यह (पहले से ही) वास्तव में कैसे कई का चयन करें व्यवहार करने के लिए है।

इसे देखें: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_ultultiple

क्या आप कृपया अपना प्रश्न स्पष्ट कर सकते हैं?


Awww मैं अब सवाल को समझता हूं, मार्कोस प्लाकोना के लिए धन्यवाद। प्रारंभिक प्रश्न अच्छी तरह से शब्द नहीं था।
कोजिकेरो

हालाँकि मुझे व्यक्तिगत रूप से लगता है कि यह उपयोगकर्ता के अनुभव के लिए "अनुचित" है जब आप कई चुनिंदा विकल्प दिखाते हैं लेकिन उपयोगकर्ता केवल एक का चयन कर सकता है।
कोजिकेरो

1
स्थिति पर निर्भर करता है
simPod

1

मैं Google पर खोज करने और अपने अंत में चीज़ बदलने के बाद यहां आ रहा हूं।

इसलिए मैं सिर्फ इस नमूने को बदल देता हूं और यह रन-टाइम पर jquery के साथ काम करेगा।

$('select[name*="homepage_select"]').removeAttr('multiple')

http://jsfiddle.net/ajayendra2707/ejkxgy1p/5/


4
आप मूल रूप से वही कर रहे हैं जो स्वीकृत उत्तर कर रहा है, लेकिन एक जटिल तरीके से। रन-टाइम में कई विशेषता को हटाने के बजाय, आप इसे सीधे HTML में हटा सकते हैं। jsfiddle.net/3rkk6m9a
हैरी

1
<select name="flowers" size="5" style="height:200px">
 <option value="1">Rose</option>
 <option value="2">Tulip</option>
</select>

यह सरल समाधान नेत्रहीन विकल्पों की एक सूची प्राप्त करने की अनुमति देता है, लेकिन केवल एक का चयन करने में सक्षम होने के लिए।


4
एसओ में आपका स्वागत है। कृपया वर्बोज़ विवरण जोड़ें
एंड्री इवान्यो

1

मैं कुछ व्यवहार के साथ select \ multi-select था यही मेरे लिए चाल है

<select name="mySelect" multiple="multiple">
    <option>Foo</option>
    <option>Bar</option>
    <option>Foo Bar</option>
    <option>Bar Foo</option>
</select>

0

उत्तर देने के लिए देर हो सकती है लेकिन किसी और की मदद कर सकते हैं, यहाँ 'एकाधिक' विशेषता को हटाए बिना इसे कैसे करें।

$('.myDropdown').chosen({
    //Here you can change the value of the maximum allowed options
    max_selected_options: 1
});

नोट: इसके लिए jQuery के चुना प्लगइन की आवश्यकता है: फसल काटने की मशीन। github.io/chosen
smolo
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.