부트 스트랩 선택 드롭 다운 목록 자리 표시 자

부트 스트랩 선택 드롭 다운 목록 자리 표시 자

---

자리 표시자가 포함 된 드롭 다운 목록을 만들려고합니다. 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에서 지원하지 않기 때문에 dropdown 또는 select 에는 자리 표시자가 없지만 다른 입력 자리 표시 자와 동일하게 보이도록 동일한 효과를 만들 수 있습니다.

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

자바 스크립트에서 다음과 같이 selectpicker를 초기화합니다.

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

---

숨겨진 속성 추가 :

<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"를 시도하십시오. 그것은 나를 위해 일했습니다.

---

이 모든 옵션은 .... 즉흥 연주입니다. 부트 스트랩은 이미 이에 대한 솔루션을 제공합니다. 모든 드롭 다운 요소의 자리 표시자를 변경하려면 다음 값을 변경할 수 있습니다.

부트 스트랩 파일의 noneSelectedText입니다.

개성을 변경하려면 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>

---

대부분의 옵션은 다중 선택에 문제가 있습니다. 제목 속성을 배치하고 첫 번째 옵션을 data-hidden = "true"로 만듭니다.

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

---

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>

---

I think, the Dropdown box with a class and JQuery code to disable the first option for user to select, will work perfectly as Select Box placeholder.

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

Make the first option disabled by JQuery.

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

This will make the first option of Dropdown as Placeholder and user will no longer able to select the first option.

Hope It helps!!

---

Here's another way to do it

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

"Choose Platform" becomes the placeholder and the 'required' property ensures that the user has to select one of the options.

Very useful, when you don't want to user field names or Labels.

---

Using Bootstrap, This is what you can do. Using class "text-hide", the disabled option will be shown at first but not on the list.

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

---

Bootstrap select has an noneSelectedText option. You can set it via data-none-selected-text attribute. Documentation.

---

For .html page

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

for .jsp or any other servlet page.

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

---

Using bootstrap, if you need to also add some values to the option to use for filters or other stuff you can simply add the class "bs-title-option" to the option that you want as a placeholder:

<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 adds this class to the title attribute.

---

Solution for Angular 2

Create a label on top of the select

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

and apply CSS to place it on top

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

pointer-events: none allows you to display the select when you click on the label, which is hidden when you select an option.

angular html css

참고URL : https://stackoverflow.com/questions/22822427/bootstrap-select-dropdown-list-placeholder