자리 표시자가 포함 된 드롭 다운 목록을 만들려고합니다. 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'});  

대부분의 옵션은 다중 선택에 문제가 있습니다. 제목 속성을 배치하고 첫 번째 옵션을 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"를 시도하십시오. 그것은 나를 위해 일했습니다.

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

부트 스트랩 파일의 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>

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>

"플랫폼 선택"이 자리 표시자가되고 '필수'속성은 사용자가 옵션 중 하나를 선택해야 함을 보장합니다.

사용자 필드 이름이나 레이블을 원하지 않을 때 매우 유용합니다.

부트 스트랩을 사용하여 할 수있는 일입니다. "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또는 다른 서블릿 페이지입니다.

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

부트 스트랩을 사용하여 필터 또는 기타 항목에 사용할 옵션에 값을 추가해야하는 경우 자리 표시 자로 원하는 옵션에 "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>

부트 스트랩은이 클래스를 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하지만 경고를 줄 것이다.