ฉันกำลังพยายามสร้างรายการแบบเลื่อนลงที่มีตัวยึด ดูเหมือนจะไม่รองรับplaceholder="stuff"เหมือนรูปแบบอื่น ๆ มีวิธีอื่นในการรับตัวยึดตำแหน่งในเมนูแบบเลื่อนลงของฉันหรือไม่

ใช่เพียง "เลือกปิดใช้งาน" ในตัวเลือก

<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

ใช้ซ่อน:

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

ดรอปดาวน์หรือเลือกไม่มีตัวยึดเนื่องจาก 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

หากคุณกำลังเตรียมใช้งานฟิลด์เลือกผ่านจาวาสคริปต์คุณสามารถเพิ่มสิ่งต่อไปนี้เพื่อแทนที่ข้อความตัวยึดเริ่มต้น

noneSelectedText: 'Insert Placeholder text'

ตัวอย่าง: ถ้าคุณมี:

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

ในจาวาสคริปต์ของคุณคุณเริ่มต้นตัวเลือกแบบนี้

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

ตัวเลือกส่วนใหญ่เป็นปัญหาสำหรับการเลือกหลายรายการ วางแอตทริบิวต์ Title และสร้างตัวเลือกแรกเป็น data-hidden = "true"

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

เพิ่มแอตทริบิวต์ที่ซ่อนอยู่:

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

ลองสิ่งนี้:

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

เมื่อใช้required+ value=""แล้วผู้ใช้ไม่สามารถเลือกได้โดยใช้hiddenจะทำให้ซ่อนจากรายการตัวเลือกเมื่อผู้ใช้เปิดกล่องตัวเลือก

ลองใช้ @title = "stuff" มันได้ผลสำหรับฉัน

ตัวเลือกทั้งหมดนี้คือ .... อิมโพรไวส์ Bootstrap เสนอวิธีแก้ปัญหานี้แล้ว หากคุณต้องการเปลี่ยนตัวยึดสำหรับองค์ประกอบแบบเลื่อนลงทั้งหมดของคุณคุณสามารถเปลี่ยนค่าของ

noneSelectedText ในไฟล์ bootstrap

หากต้องการเปลี่ยนแต่ละรายการคุณสามารถใช้พารามิเตอร์ 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>

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>

ผมคิดว่ากล่องหล่นลงกับการเรียนและรหัส 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>

สิ่งนี้จะทำให้ตัวเลือกแรกของดรอปดาวน์เป็นตัวยึดตำแหน่งและผู้ใช้จะไม่สามารถเลือกตัวเลือกแรกได้อีกต่อไป

หวังว่าจะช่วย !!

นี่เป็นอีกวิธีที่ทำได้

<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>

"เลือกแพลตฟอร์ม" จะกลายเป็นตัวยึดตำแหน่งและคุณสมบัติ "จำเป็น" ทำให้มั่นใจได้ว่าผู้ใช้ต้องเลือกตัวเลือกใดตัวเลือกหนึ่ง

มีประโยชน์มากเมื่อคุณไม่ต้องการใช้ชื่อฟิลด์หรือป้ายกำกับของผู้ใช้

การใช้ Bootstrap นี่คือสิ่งที่คุณสามารถทำได้ การใช้คลาส "text-hide" ตัวเลือกปิดใช้งานจะแสดงในตอนแรก แต่ไม่ปรากฏในรายการ

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

Bootstrap select มีnoneSelectedTextตัวเลือก คุณสามารถตั้งค่าผ่านdata-none-selected-textแอตทริบิวต์ เอกสารประกอบ .

สำหรับ.htmlเพจ

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

สำหรับ.jspหรือหน้า servlet อื่น ๆ

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

การใช้ bootstrap หากคุณต้องการเพิ่มค่าบางอย่างให้กับตัวเลือกเพื่อใช้สำหรับตัวกรองหรือสิ่งอื่น ๆ คุณสามารถเพิ่มคลาส "bs-title-option" ให้กับตัวเลือกที่คุณต้องการเป็นตัวยึด:

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

Bootstrap เพิ่มคลาสนี้ให้กับtitleแอตทริบิวต์

โซลูชันสำหรับ Angular 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>

และใช้ CSS เพื่อวางไว้ด้านบน

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

pointer-events: none ช่วยให้คุณสามารถแสดงสิ่งที่เลือกเมื่อคุณคลิกที่ฉลากซึ่งจะซ่อนอยู่เมื่อคุณเลือกตัวเลือก

เชิงมุม html css

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

คุณสามารถแทนที่defaultValueด้วยselectedแต่นั่นจะเป็นการเตือน