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>

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.

jQuery Select2 placeholder doesn't work when defined inline?

I have the following multiple drop-down lists defined using select2 but the placeholders don't work?
<select class="js-select2" multiple="multiple" placeholder="Select State">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</select>
<select class="js-select2" multiple="multiple" placeholder="Select Fruits">
<option value="Apples">Apples</option>
<option value="Oranges">Oranges</option>
</select>
<script>
$(".js-select2").select2({
// placeholder: 'Select an option...'
});
</script>
It only works if I define the placeholder inside the select2 option list (commented out above) but I want to use a single class to initialize all select2 multiselects drop-downs and display different placeholders.
Is it possible to achieve this?

For a quick workaround, you can pass the value of the attribute to the placeholder option:
$(".js-select2").each(function() {
$(this).select2({
placeholder: $(this).attr('placeholder')
});
});
This does not work when using $(".js-select2").select2() directly, I assume in that context this doesn’t point to the right object (or something like that). But if you use an each loop to initialize it on each element separately, it works.
https://jsfiddle.net/84whaced/
Alternatively, it should work if you use data-placeholder in the HTML (amazing what we can find out once we check the documentation, right?), see https://select2.github.io/options.html#data-attributes - https://jsfiddle.net/84whaced/1/
This would be the preferred option, I think.

It will work as:
If we just set the attr e.g. $("#state").attr('data-placeholder', 'Select State'), there will no effect.
However, if we set the attr and then call $("#state").select2() with no arguments, then the placeholder updates.
$("#state").attr("data-placeholder","Select State");
$("#state").select2();

You can use the data-placeholder for different placeholder for every select
$('select').select2({
placeholder: function(){
$(this).data('placeholder');
}
});
<select class="js-select2" multiple="multiple" data-placeholder="Select State">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</select>
<select class="js-select2" multiple="multiple" data-placeholder="Select Fruits">
<option value="Apples">Apples</option>
<option value="Oranges">Oranges</option>
</select>
You can check the Demo as well.

Maybe you have similar ids on your page. JS'll select latest id by default. Try to change them.

Set Default Text Option in AngularJS Dropdownlost

I have an angularjs dropdownlist using ng-options
<select ng-options="perlocation.name for perlocation in locations" ng-model="locationDropdown">
My dropdown list loads fine but the selected option 0 is empty and i want to replace it with "Please Select One"
<option value="?" selected="selected"></option>
How do i do this? All the examples i have seen online doesnt seem to work.
Thanks

In the angular documentation for select it states
Optionally, a single hard-coded element, with the value set
to an empty string, can be nested into the element. This
element will then represent the null or "not selected" option. See
example below for demonstration.
Which means you can do this:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-init="arr=[1,2,3]">
<select ng-model="val" ng-options="x for x in arr">
<option value="">Please select an option</option>
</select>
<br>
Val: {{val}}
</div>
</div>

Initialize $scope.locationDropdown = 'Please Select One' as default
or
<select ng-options="perlocation.name for perlocation in locations" ng-model="locationDropdown">
<option> Please Select One </option>
</select>

AngularJS: ng-model does not update when ng-options refreshes

I'm new to AngularJS, so I apologize if this question is naive.
We have cascading selects that populate as you select values. When the value of Select A changes, the values in Select B also change since they filter based on the value in Select A.
So here is the scenario:
Choose option from Select A
Choose option from Select B
Change selection for Select A
Observe that options in Select B update accordingly.
Observe that bound model for Select B does not update accordingly.
This seems so basic that we are really scratching our heads. What is the point of two-way data binding if this scenario isn't covered?
Here is my view:
<body ng-controller="MainCtrl">
Make:
<select ng-model="makeng" ng-options="option.value as option.display for option in makes">
<option ng-disabled="true" ng-selected="true" value="">Select a make</option>
</select>
<br />
{{makeng}}
<br /> <br />
Model:
<select ng-model="modelng" ng-options="option.display for option in models | filter:{make:makeng}">
<option ng-disabled="true" ng-selected="true" value="">Select a model</option>
</select>
{{modelng}}
</body>
Here's a Plunkr, demonstrating:
http://plnkr.co/edit/9XrKgW?p=preview
P.S. The above example is purely fictional and forked from another plunkr. Just the easiest way to demonstrate what we are seeing.

This is how it is supposed to work. The select control changes the model in response to a user's selection, but if you change the set of allowed values from underneath it (i.e. by filtering out) it keeps the model intact.
The way to make this work is by invalidating the model in response to a change in Select A:
Make:
<select ng-model="makeng"
ng-options="option.value as option.display for option in makes"
ng-change="modelng = undefined">
<option value="">Select a make</option>
</select>
<br />
Model:
<select ng-model="modelng"
ng-options="option.display for option in models | filter:{make:makeng}">
<option value="">Select a model</option>
</select>