Пустая опция по умолчанию для выбора для Safari

Question

Я пытаюсь сделать выбор, если первое поле Option пусто, оно не отображается в раскрывающемся списке и недоступно для выбора.

Я искал около 4 часов. Я видел так много рабочих вариантов, но дело в том, что ни один из них (или, по крайней мере, то, что я нашел) не работает в Safari.

Это мой код:

<select class="custom-select" formControlName="subindustryName">
<option *ngFor="let subindustry of subIndustries" 
[value]="subindustry.value">{{subindustry.label}}</option>
</select>

Я не использую jQuery.

Answer 1

<option disabled selected value>Select Option</option>
<option value="one">one</option>
<option value="two">two</option>

В Safari и Chrome по умолчанию выбрано выбранное значение.

Answer 2

будет ли это работать для вас?Вы можете установить свойства стиля для опции и отключить поле, чтобы оно больше не могло быть выбрано.на этот вопрос вроде бы ответили другим постом. пустая опция по умолчанию .

<select>
  <option disabled selected value style="display:none"></option>
  <option value="one">one</option>
  <option value="two">three</option>
  
</select>

Answer 3

Просто добавьте опцию со значением undefined, чтобы заставить angular выбрать это значение. как показано ниже

<select class="custom-select" formControlName="subindustryName">
    <option value="undefined"></option>
    <option *ngFor="let subindustry of subIndustries" 
    [value]="subindustry.value">{{subindustry.label}}</option>
</select>

и с, если вы хотите, чтобы он был недоступен для выбора, добавьте к нему атрибут 'disabled'.

РЕДАКТИРОВАТЬ ЗА КОММЕНТАРИЙ

так что все, что вы вставили в вопрос, должно работать. Вот мой фрагмент кода, который работает ..

<div class="form-group">
  <label class="col-md-3 control-label">Gender</label>
    <div class="col-md-3">
      <select id="gender" class="form-control" [(ngModel)]="userModel.gender" name="gender" required >
        <option value="male">Male</option>
        <option value="female">Female</option>
      </select>
    </div>
</div>

Просто попробуйте использовать шаблонный подход для subindustryName и проверьте.

Answer 4

если вы используете лайк.

      <select>
         <option> Select Option </option> // replace above code with 
         <option value='' selected> Select Option </option>
      </select>

Надеюсь, это сработает.