বুটস্ট্র্যাপ নির্বাচন করুন ড্রপডাউন তালিকার স্থানধারক

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সমস্ত সঠিক are :)

— এমডি আশিক

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

ড্রপডাউন বা নির্বাচন একটি স্থানধারক নেই কারণ এইচটিএমএল এটিকে সমর্থন করে না কিন্তু এটি একই প্রভাব তৈরি করা সম্ভব তাই এটি অন্যান্য কৃষি উপকরণের স্থানধারক হিসাবে একই দেখায়

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

"নির্বাচিত অক্ষম" শ্রেণি যুক্ত করার সময় আপনি এক টন কাস্টম কোড লিখেছিলেন is

— জর্দান.জেডি

তার কৃতিত্বের জন্য, তিনি আরও কিছুটা দর্শনীয়ভাবে সম্পূর্ণ (আরও কোড সহ), যেখানে স্থানের তালিকাটি তালিকা নির্বাচনের মধ্যে রেন্ডার করা হয়নি। যদিও আমি ন্যূনতম কোডের পথে যাচ্ছি।

— রোডকিলঞ্জ

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

এটি কীভাবে জে লিনের উত্তর এবং ব্র্যাকের উত্তর থেকে আলাদা ?

— আটফৌড

এটি আমার পক্ষে সবচেয়ে ভাল কাজ করেছে, কারণ নির্বাচিত অর্থ এটি ডিফল্ট দ্বারা নির্বাচিত, অক্ষম যাতে এটি ক্লিক করা যায় না এবং ড্রপডাউন থেকে লুকানো থাকে। আমি মনে করি লুকানো ব্যবহার করা থাকলে অক্ষম সম্ভবত সেখানে থাকার প্রয়োজন নেই doesn't

— aspergillusOryzae

Answer 7

এটা চেষ্টা কর:

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

যখন required+ ব্যবহার করেন value=""তখন ব্যবহারকারী এটি ব্যবহার করে এটি নির্বাচন করতে পারবেন না hiddenযখন ব্যবহারকারী বিকল্প বাক্সটি খুলবে, তখন এটি বিকল্প তালিকা থেকে গোপন করবে

Comments

অত্যন্ত বাঞ্ছনীয়!

— একোয়া 4

Answer 8

@ শিরোনাম = "স্টাফ" চেষ্টা করুন। এটা আমার জন্য কাজ করে।

Comments

একটি উদাহরণ pefectly ফিট হবে

— workdreamer

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

আমি মনে করি, ব্যবহারকারীদের নির্বাচনের জন্য প্রথম বিকল্পটি অক্ষম করতে ক্লাস এবং জিকুয়েরি কোড সহ ড্রপডাউন বাক্সটি নির্বাচিত বাক্স স্থানধারক হিসাবে পুরোপুরি কাজ করবে ।

<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 আপনি যখন লেবেলে ক্লিক করেন তখন আপনি নির্বাচনটি প্রদর্শন করতে পারবেন যা আপনি যখন কোনও বিকল্প নির্বাচন করেন তখন লুকানো থাকে।

কৌণিক এইচটিএমএল CSS

Answer 18

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

আপনি প্রতিস্থাপন করতে পারেন defaultValueসঙ্গে selectedকিন্তু যে সতর্কবার্তা দিতে হবে।