javascript - Default blank option on <select> for Safari - Stack Overflow

admin管理员组

文章数量:1401199

I'm trying to make a <select> where the first <option> is empty, it is not visible in the dropdown and not selectable.

I've been researching for like 4 hours. I saw so many working options but the thing is that none of them (or at least what I've found) are working on Safari.

This is my code:

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

I'm not using jQuery.

I'm trying to make a <select> where the first <option> is empty, it is not visible in the dropdown and not selectable.

I've been researching for like 4 hours. I saw so many working options but the thing is that none of them (or at least what I've found) are working on Safari.

This is my code:

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

I'm not using jQuery.

• javascript
• html
• angular

Share Improve this question Follow edited May 15, 2020 at 21:12 MathMax 61799 silver badges2525 bronze badges asked Sep 18, 2018 at 5:53 CristianCristian 4111 silver badge33 bronze badges 4

• 3 can you please share code – Affan Commented Sep 18, 2018 at 5:55
• 1 Maybe this will help: stackoverflow./questions/8605516/… – Simon Jensen Commented Sep 18, 2018 at 5:57
• 2 Possible duplicate of default select option as blank – Simon Jensen Commented Sep 18, 2018 at 5:57
• I've tried pretty much everything from those posts and it dosen't work for me – Cristian Commented Sep 18, 2018 at 6:00

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

would this work for you? you can set style properties for an option and disable the field so it's not selectable anymore. this question seems to have been answered with another post. default empty option.

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

Just add option with value undefined to force angular to select that value. like below

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

and with if you want to it to be not selectable then add 'disabled' attribute with that.

EDIT AS PER COMMENT

so whatever you pasted in question should work. Here is my code snippet which is working..

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

Just try with template driven approach for 'subindustryName' and check.

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

In both Safari and Chrome, default disabled selected value is this.

if you use like.

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

Hope this will work.

本文标签： javascriptDefault blank option on ltselectgt for SafariStack Overflow