बूटस्ट्रैप ड्रॉपडाउन सूची प्लेसहोल्डर का चयन करें

Question

मैं एक ड्रॉपडाउन सूची बनाने की कोशिश कर रहा हूं जिसमें एक प्लेसहोल्डर है। यह placeholder="stuff"अन्य रूपों के रूप में समर्थन करने के लिए प्रतीत नहीं होता है। क्या मेरे ड्रॉपडाउन में प्लेसहोल्डर प्राप्त करने का एक अलग तरीका है?

Answer 1

हां सिर्फ विकल्प में "चयनित विकलांग"।

<select>
    <option value="" selected disabled>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

बेला से लिंक

आप इसका जवाब भी देख सकते हैं

https://stackoverflow.com/a/5859221/1225125

Comments

यह क्वेश्चन का जवाब नहीं देता है क्योंकि वह बूटस्ट्रैप बिल्ट-इन समाधान के लिए कह रहा है

— मेहदी

इसके अलावा, आप उपयोग कर सकते हैं disabled selected hiddenया केवल hiddenसभी सही हैं। :)

— एमडी आशिक

Answer 2

छिपा हुआ उपयोग करें:

<select>
    <option hidden >Display but don't show in list</option>
    <option> text 1 </option>
    <option> text 2 </option>
    <option> text 3 </option>
</select>

Comments

अंतिम टिप्पणी के साथ जारी रखें, जब वी-मॉडल का उपयोग करें, इसका उपयोग करने की आवश्यकता है: <विकल्प: मूल्य = "अशक्त" अक्षम छिपा हुआ> चयन आयु </ विकल्प>

— होमर

Answer 3

ड्रॉपडाउन या चयन के पास प्लेसहोल्डर नहीं है क्योंकि HTML इसका समर्थन नहीं करता है लेकिन यह एक ही प्रभाव पैदा करना संभव है इसलिए यह अन्य इनपुट प्लेसहोल्डर के समान दिखता है

    $('select').change(function() {
     if ($(this).children('option:first-child').is(':selected')) {
       $(this).addClass('placeholder');
     } else {
      $(this).removeClass('placeholder');
     }
    });

.placeholder{color: grey;}
select option:first-child{color: grey; display: none;}
select option{color: #555;} // bootstrap default color

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control placeholder">
   <option value="">Your Placeholder Text</option>
   <option value="1">Text 1</option>
   <option value="2">Text 2</option>
   <option value="3">Text 3</option>
</select>

यदि आप सूची में पहला विकल्प देखना चाहते हैं तो css से डिस्प्ले प्रॉपर्टी हटा दें

Comments

आपने "कस्टमाइज्ड डिसेबल" क्लास को जोड़ते समय एक टन कस्टम कोड लिखा था, यही बात है।

— जॉर्डन .JD

अपने क्रेडिट के लिए, उनका थोड़ा अधिक नेत्रहीन पूर्ण (अधिक कोड के साथ) है, जहां प्लेसहोल्डर को सूची चयन के भीतर प्रदान नहीं किया गया है। हालांकि मैं चीजों के न्यूनतम कोड तरीके के लिए जा रहा हूं।

— रोडकिल्नज़

Answer 4

यदि आप जावास्क्रिप्ट के माध्यम से चयन फ़ील्ड को इनिशियलाइज़ कर रहे हैं, तो डिफ़ॉल्ट प्लेसहोल्डर टेक्स्ट को बदलने के लिए निम्नलिखित को जोड़ा जा सकता है

noneSelectedText: 'Insert Placeholder text'

उदाहरण: यदि आपके पास है:

<select class='picker'></select>

अपनी जावास्क्रिप्ट में, आप इस तरह से चयनकर्ता को इनिशियलाइज़ करते हैं

$('.picker').selectpicker({noneSelectedText: 'Insert Placeholder text'});  

Answer 5

बहु-चयन के लिए अधिकांश विकल्प समस्याग्रस्त हैं। शीर्षक विशेषता रखें, और डेटा-छिपे = "सही" के रूप में पहला विकल्प बनाएं

<select class="selectpicker" title="Some placeholder text...">
    <option data-hidden="true"></option>
    <option>First</option>
    <option>Second</option>
</select>

Answer 6

छिपी विशेषता जोड़ें:

<select>
    <option value="" selected disabled hidden>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

Comments

यह जय लिन के जवाब और ब्रेके के जवाब से कैसे अलग है ?

— अथफौड

इसने मेरे लिए सबसे अच्छा काम किया, क्योंकि चयनित अर्थ यह डिफ़ॉल्ट रूप से चयनित है, अक्षम है इसलिए इसे क्लिक नहीं किया जा सकता है, और ड्रॉपडाउन से छिपाया जा सकता है। मुझे लगता है कि अगर छिपा हुआ उपयोग किया जाता है, तो अक्षम होने की आवश्यकता नहीं है।

— aspergillusOryzae

Answer 7

इसे इस्तेमाल करे:

<select class="form-control" required>
<option value="" selected hidden>Select...</option>

जब required+ का उपयोग करते हैं value=""तो उपयोगकर्ता इसका चयन नहीं कर सकता उपयोग hiddenकरने से यह विकल्प सूची से छिपा होगा, जब उपयोगकर्ता विकल्प बॉक्स खोलते हैं

Comments

अत्यधिक सिफारिशित!

— एक्वा 4

Answer 8

@Title = "सामान" आज़माएं। इसने मेरे लिए काम किया।

Comments

एक उदाहरण पूरी तरह से फिट होगा

— कार्यक्षेत्र

Answer 9

यह सभी विकल्प हैं .... आशुरचना। बूटस्ट्रैप इसके लिए पहले से ही एक समाधान प्रदान करता है। यदि आप अपने सभी ड्रॉपडाउन तत्वों के लिए प्लेसहोल्डर को बदलना चाहते हैं तो आप इसका मूल्य बदल सकते हैं

बूटस्ट्रैप फ़ाइल में कोई नहीं।

अलग-अलग बदलने के लिए, आप TITLE पैरामीटर का उपयोग कर सकते हैं।

उदाहरण:

<div class="form-group">
          <label class="control-label col-xs-2" id="country">Continent:</label>
          <div class="col-xs-9">
            <select name="zones[]" class="selectpicker" title="All continents" id="zones" multiple >
              <option value="Africa">Africa</option>
              <option value="Asia">Asia</option>
              <option value="North America">America North</option>
              <option value="South America">America South</option>
              <option value="Antarctica">Antarctica</option>
              <option value="Australia">Australia</option>
              <option value="Europe">Europe</option>
            </select>
          </div>
        </div>

Comments

आपने सर मुझे बचा लिया। उपरोक्त सभी विकल्प मल्टीसेप्ट के लिए काम नहीं कर रहे थे। चूंकि चयन पिछले मानों का चयन नहीं कर रहा था। शीर्षक ने मेरे लिए काम किया

— फरन खान

Answer 10

1. में bootstrap-select.jsखोजें title: null, कर निकाल दें।
2. तत्व title="YOUR TEXT"में जोड़ें <select>।
3. ठीक :)

---

उदाहरण:

<select title="Please Choose one item">
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

Answer 11

मुझे लगता है, उपयोगकर्ता के लिए पहला विकल्प निष्क्रिय करने के लिए एक वर्ग और JQuery कोड वाला ड्रॉपडाउन बॉक्स, पूरी तरह से चयन बॉक्स प्लेसहोल्डर के रूप में काम करेगा ।

<select class="selectboxclass">
   <option value="">- Please Select -</option>
   <option value="IN">India</option>
   <option value="US">America</option>
</select>

JQuery द्वारा अक्षम पहला विकल्प बनाएं।

<script>
$('select.selectboxclass option:first').attr('disabled', true);
</script>

यह ड्रॉपडाउन का पहला विकल्प बना देगा क्योंकि प्लेसहोल्डर और उपयोगकर्ता अब पहले विकल्प का चयन करने में सक्षम नहीं होंगे।

आशा करता हूँ की ये काम करेगा!!

Answer 12

इसे करने का एक और तरीका है

<select name="GROUPINGS[xxxxxx]" style="width: 60%;" required>
    <option value="">Choose Platform</option>
<option value="iOS">iOS</option>
    <option value="Android">Android</option>
    <option value="Windows">Windows</option>
</select>

"प्लेटफ़ॉर्म चुनें" प्लेसहोल्डर बन जाता है और 'आवश्यक' संपत्ति सुनिश्चित करती है कि उपयोगकर्ता को किसी एक विकल्प का चयन करना है।

बहुत उपयोगी है, जब आप उपयोगकर्ता फ़ील्ड नाम या लेबल नहीं चाहते हैं।

Answer 13

बूटस्ट्रैप का उपयोग करना, यह वही है जो आप कर सकते हैं। कक्षा "पाठ-छिपाने" का उपयोग करते हुए, अक्षम विकल्प पहली बार में दिखाया जाएगा, लेकिन सूची में नहीं।

<select class="form-control" >
  <option selected disabled class="text-hide">Title</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Answer 14

बूटस्ट्रैप सिलेक्ट का noneSelectedTextविकल्प है। आप इसे data-none-selected-textविशेषता के माध्यम से सेट कर सकते हैं । प्रलेखन ।

Answer 15

के लिए .htmlपेज

<select>
    <option value="" selected disabled>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

के लिए .jspया किसी अन्य सर्वलेट पेज।

<select>
    <option value="" selected="true" disabled="true">Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

Answer 16

बूटस्ट्रैप का उपयोग करते हुए, यदि आपको फ़िल्टर या अन्य सामान के लिए उपयोग करने के लिए विकल्प में कुछ मान जोड़ने की आवश्यकता है, तो आप कक्षा "बी एस-शीर्षक-विकल्प" को उस विकल्प में जोड़ सकते हैं जिसे आप प्लेसहोल्डर के रूप में चाहते हैं:

<select class="form-group">
   <option class="bs-title-option" value="myVal">My PlaceHolder</option>
   <option>A</option>
   <option>B</option>
   <option>c</option>
</select>

बूटस्ट्रैप इस वर्ग को titleविशेषता में जोड़ता है ।

Answer 17

कोणीय 2 के लिए समाधान

चयन के शीर्ष पर एक लेबल बनाएं

<label class="hidden-label" for="IsActive"
    *ngIf="filterIsActive == undefined">Placeholder text</label>
<select class="form-control form-control-sm" type="text" name="filterIsActive"
    [(ngModel)]="filterIsActive" id="IsActive">
    <option value="true">true</option>
    <option value="false">false</option>
</select>

और इसे शीर्ष पर रखने के लिए सीएसएस लागू करें

.hidden-label {
    position: absolute;
    margin-top: .34rem;
    margin-left: .56rem;
    font-style: italic;
    pointer-events: none;
}

pointer-events: none जब आप किसी विकल्प का चयन करते हैं, जो लेबल पर क्लिक होता है, तो आप उसे प्रदर्शित करने की अनुमति देते हैं।

कोणीय एचटीएमएल सीएसएस

Answer 18

<option value="" defaultValue disabled> Something </option>

आप के defaultValueसाथ बदल सकते हैं , selectedलेकिन यह चेतावनी देगा।