We Keep Coding

How to make input type list only accept a list choice?

I want user to select a state just from this list :
<input list="states">
<datalist id="states">
<option value="Pendiente">Pendiente</option>
<option value="Frenada">Frenada</option>
<option value="Finalizada">Finalizada</option>
</datalist>
but also I don't want to use <select>, i know that but I want to keep the ability to type (and search among the options) but at last, one of the options must be selected.
please help me with this. I want to use it in react

You can set the value attribute of the input with the option value you want to be selected:
<input list="states" value="Pendiente">
<datalist id="states">
<option value="Pendiente">Pendiente</option>
<option value="Frenada">Frenada</option>
<option value="Finalizada">Finalizada</option>
</datalist>

SELECT control, how to set that what you want to show

I have some issue with this:
<select name="whatever">
<option value="pizza">pizza</option>
<option value="pasta">pasta</option>
<option value="sandwich">sandwich</option>
<option value="cheese">cheese</option>
</select>
Select control always when i "run" it show me as first in drop-down menu a pizza and that mean a pizza is selected by default. So, how i can change this if i want to post cheese to be a default(current active in drop-down)
This down is just a example how i want to work my select, you see down a placeholder=5 , that mean this number control will by default use a 5 and i want to do the similar thing with my select control.
<input type='number' placeholder=5 min=0 max=10 step=1>
Thank you!

You simply just put the attribute of selected on to the option you want as your default.
You can use a JavaScript function to get the value from your table and assign this value as the selected option of the drop-down. The options for a select drop-down are identified by an index starting at 0.
In the demo below, I've used buttons to call the JS function. Click on the button to change the selected option:
var sel = document.getElementsByName("whatever")[0];
function defaultOption(option) {
sel.options[option].selected = 'selected';
}
<button onClick="defaultOption(0)">pizza</button>
<button onClick="defaultOption(1)">pasta</button>
<button onClick="defaultOption(2)">sandwich</button>
<button onClick="defaultOption(3)">cheese</button>
</br>
</br>
<select name="whatever">
<option value="pizza">pizza</option>
<option value="pasta">pasta</option>
<option value="sandwich">sandwich</option>
<option value="cheese" selected>cheese</option>
</select>

Default blank option on <select> for Safari

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.

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.

How to populate a value in a select ( HTML ) list in AngularJS

I am using a select list in a particular edit form page. Whenever a particular entry has to be edited, a new state with the edit form appears. It has a select list which has to populated with one of its options (ideally the value that is fetched from the server using API has to be populated into the select).
I am using Angular JS on the client side. Could somebody please tell me how to achieve the same thing using Angular JS?
I need that initial value inserted by the user in the select to be shown up as a default when the edit page is opened.
(MOREOVER, MY PLACEHOLDER NOT WORKING:"Choose a country")
Lets say there is something like this:
<div class="col-md-8">
<select data-placeholder="Choose a Country..." class="chosen-select form-control" style="width:350px;" tabindex="2" required="" ng-model="location">
<option value="" disabled selected>Select</option>
<option ng-repeat="location in locations1" value="{{location.id}}">{{location.name}}</option>
</select>
</div>

Use ngOptions.
<select ng-options="location as location.name for location in locations track by location.id" ng-model="selected"></select>

With ng-options you can do it like this:
<div class="col-md-8">
<select ng-model="selectedLocation" ng-options="location.id as location.name for location in locations1" class="chosen-select form-control" style="width:350px;" tabindex="2">
<option value="" disabled selected>Choose a Country</option>
</select>
</div>
The location.id is set to the options value and the location.name is set to the text.
To use a placeholder in a select is kind of what the default options does for you. So I would set the default option text to "Choose a country". Se this SO answer on that topic

On change pass the value of select option box in url

I am trying to pass the value of option box in url on onchange event.I have to pass the value of selected option box to some.php file.Here i am tried out but it's not working for me.
Bellow is my sample code
<select id="font" onchange="document.getElementById('font').src='some.php?fontname='+this.value">
<option value="arial" >arial</option>
<option value="stencil" >stencil</option>
</select>

You need to use javascript location.href for redirecting.
<select id="font" onchange="window.location.href='some.php?fontname='+this.value">
<option value="arial" >arial</option>
<option value="stencil" >stencil</option>
</select>