Why isn't the "label option" ((Please Select One)) shown? This is a snippet from an Angular 2 project.
<select [(ngModel)]="selectUser" class="form-control">
<option value="" disabled selected>(Please Select One)</option>
<option value="USER">Assign Users</option>
<option value="TAGS">Tags</option>
</select>
Related
I am trying to hide the placeholder text in a dropdown menu from showing up as a selectable option. I have searched other options on stack overflow and tried the following solution but none have worked:
<option style="display:none" >Select Stop</option>
<option value="" disabled selected hidden >Select Stop</option>
<option value="" disabled selected style="display: none;">Select Stop</option>
My code looks like this which WORKS in stackoverflow but not when I put it into my site using latest version of chrome...
<select>
<option value="" disabled selected hidden>Select Stop</option>
<option value="home">home</option>
<option value="school">school</option>
<option value="office">office</option>
</select>
Not sure what are you actually trying achieve, to hide the select or option simply add disabled to them, see below, i have 2 select, one with option disbaled other one the entire select disabled
<select>
<option value="">Select Stop</option>
<option value="home" >home</option>
<option value="school" disabled>school</option>
<option value="office" >office</option>
</select>
<select disabled>
<option value="" >Select Stop</option>
<option value="home" >home</option>
<option value="school" >school</option>
<option value="office" >office</option>
</select>
Maybe you might want to add some JQuery into your file
$(function() {
$('.location').find('option:contains(office)').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='location'>
<option value="select stop">Select Stop</option>
<option value="home">home</option>
<option value="school">school</option>
<option value="office">office</option>
</select>
Does anyone know why a form field name would cause Chrome's autofill to stop working correctly? If you open the fiddle I've created in Chrome, you'll notice the Card Number field populates correctly, but not the expiry month and year. If you change the name of the BirthDate.MM select list to BirthDate.Foo and BirthDate.YYYY to BirthDate.Bar; and then and re-run, the credit card autofill works as expected. Now, an obvious suggestion would be to simply disable the bday- autofill and change the those values to "off" or completely remove the autocomplete attribute. Astoundingly, removing the autocomplete attribute or changing the bday- values to "off" on those fields then breaks the address autofill!!!
The solution to the autofill problem itself is simply change the field names. What I want to know is why? Can anyone clarify how I unwittingly poked Chrome's field name sniffing feature?
<fieldset>
<legend>Payment Information</legend>
<div><input autocomplete="cc-number" id="CreditCard_CardNumber" maxlength="16" name="CreditCard.CardNumber" pattern="\d*" required="" type="text" placeholder="Card Number" value="" /></div>
<div>
<label for="CreditCard_ExpirationMonth">Expires:</label>
<select autocomplete="cc-exp-month" id="cardExpirationMonth" name="CreditCard.ExpirationMonth" required="">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select autocomplete="cc-exp-year" id="cardExpirationYear" name="CreditCard.ExpirationYear" required="">
<option value="">Year</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
<option value="2037">2037</option>
</select>
</div>
</fieldset>
Use the lower-case version of your names.
For me , using Name as name attribute is not working, autofill recognizes the field as CC !!
If I change it to name , works like a charm.
Hope this helps!
For input element we can use datalist element as autocomplete
<input name="account" placeholder="account" list="publisher">
<datalist id="publisher">
<option value="00000" >00000</option>
<option value="00001" >00001</option>
<option value="00002">00002</option>
</datalist>
there is a way to do so for select element ? not autocomplete just fill the select with options for example:
the two example should be equivalent
<select name=account>
<option value="00000" >00000</option>
<option value="00001" >00001</option>
<option value="00002">00002</option>
</select>
and that
<select name="account" list="publisher"></select>
I am trying to have a select drop down display the first option as a placeholder value
The following code works
<form (ngSubmit)="citySubmit(f)" #f="ngForm">
<select>
<option value="" disabled selected>Select Your City</option>
<option *ngFor="let c of cities" [value]="c">{{c}}</option>
</select>
</form>
however the following code does not
<form (ngSubmit)="citySubmit(f)" #f="ngForm">
<select
[ngModel]="city">
<option value="" disabled selected>Select Your City</option>
<option *ngFor="let c of cities" [value]="c">{{c}}</option>
</select>
</form>
which leads me to believe I am using the ngmodel incorrectly.
Can I have some guidance please.
It should be,
Change
From
<select [ngModel]="city">
To
<select [(ngModel)]="city">
I am using bootstrap multiselect and Select with preselected options Cheese is not working? Why?
this is my html
<div class="input-group">
<!-- input type="text" class="form-control turnusdays infofield" id="turnusdays1"-->
<!-- div class="info"></div -->
<span class="input-group-btn">
<select class="multiselectDays turnusdays" multiple="multiple">
<option value="Pon">Pon</option>
<option value="Tor">Tor</option>
<option value="Sre">Sre</option>
<option value="Čet">Čet</option>
<option value="Pet" selected>Pet</option>
<option value="Sob">Sob</option>
<option value="Ned">Ned</option>
<option value="Vikend">Vikend</option>
<option value="Praznik">Praznik</option>
</select>
</span>
</div>
What is the error you are getting ? If its MVC then use Listboxfor for multiselect.
Updated
!
Code here is :
<select multiple="multiple" style="width:500px;height:300px">
<option value="Pon" selected>Pon</option>
<option value="Tor">Tor</option>
<option value="Sre">Sre</option>
<option value="Čet">Čet</option>
<option value="Pet" selected>Pet</option>
<option value="Sob" selected>Sob</option>
<option value="Ned">Ned</option>
<option value="Vikend">Vikend</option>
<option value="Praznik">Praznik</option>
</select>
Remove the div and span class and try only the select option.