I have a select drop down. I have to show " select" as the default value. After selection an option, the value shown should be selected value.
<select #selectedPlanet
(change)='onOptionsSelected(selectedPlanet.value)'>
<option selected hidden>Select</option>
<option *ngFor='let planet of planetsList' [value]="planet.name">{{planet.name}}</option>
</select>
</div>
But now what happens is that, it shows "select" as default. But on selecting an option, the changed option changes to "select" in UI.Could anyone please help me
<select #selectedPlanet (change)='onOptionsSelected($event.target.value)'>
<option value="0" selected>Select</option>
<option *ngFor="let planet of planetsList let i=index" value="{{planet.name}}">{{planet.name}}</option>
</select>
Related
I have a drop down list and it has two values. if user didn't select none of the value it should set a default value.
<select class="form-control" ng-model="abc.code" required>
<option ng-repeat="x in codeList" value="{{x}}" ng-selected="codeList[1]" >
{{x}} </option>
</select>
Can someone help me.
you can add something like this
<option value="didnt select" selected hidden>please select one option</option>
for default value statically in your select input
With regular html select menus, if you create an option element with selected and disabled attributes and give that option text, then that text will display in the select menu by default. Here is basic html:
<select name="myname">
<option selected disabled>Select one...</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
This is what pages looks like:
But in the below isolated code, I demonstrate that Angular is intrusively not showing the option text:
https://github.com/lovefamilychildrenhappiness/DropDownNoShowDefaultValue
// app.component.html
<h1>Select Box does not show default value: </h1>
<app-select-box
[options]="collection"
></app-select-box>
// select-box.component.html
<select
[value]="value"
[disabled]="disabled">
<option selected disabled value="">Select one...</option>
<option *ngFor="let option of options">{{option}}</option>
</select>
What is causing Angular to disrupt the native html behavior of select boxes?
This is because your select value is bound to a variable called value which is undefined initially. As per the html, there is no option with a value of undefined, so nothing gets selected. Your Select one... option has an empty string value. So to fix this, initialize value in your component to an empty string.
value: string = '';
just put the option to be selected in the first place.
<option value="0">value to be selected<option>
<option value="1">next<option>
<option value="2">Continues<option>
When creating dropdowns with Semantic UI in a select tag. If the value of an option is the same as the text of a different option, the last option child will be the one selected. Regardless of the option that is selected.
HTML:
<select class="ui search dropdown">
<option value="">Please select</option>
<option value="a" selected>This is option A</option>
<option value="b">This is option B</option>
<option value="c">a</option>
<option value="d">This is option D</option>
</select>
JS:
$('.dropdown').dropdown();
The selected value should be a => "This is option A", but instead value c => "a" is selected.
I have tried different settings and options for the dropdown with no success. Am I missing something or is this a problem with Semantic UI?
Fiddle
So there are 2 dropdown boxes in a page, Country, and state / province. when a certain option is picked in the country dropdown box, it changes the values in the state dropdown box.
Here is the country dropdown:
<select class="select optional" name="order[billing_country]" id="order_billing_country" aria-invalid="false">
<option selected="selected" value="USA">USA</option>
<option value="CANADA">CANADA</option>
</select>
Here is the state dropdown with USA selected:
<select class="select optional" name="order[billing_state]" id="order_billing_state">
<option value=""></option>
<option value="IL">IL</option>
<option value="NY">NY</option>
</select>
Here is the state dropdown with CANADA selected:
<select class="select optional" name="order[billing_state]" id="order_billing_state">
<option value=""></option>
<option value="SK">SK</option>
<option value="YT">YT</option>
</select>
When i select an option in the country dropdown normally, it works and changes the values in the state dropdown, but when i use javascript to select a country dropdown option, it doesnt change the values in the state dropdown. Here is some of the code i have tried:
document.getElementById('order_billing_country').value = "CANADA"
and
document.getElementById("order_billing_country").selectedIndex = 1
Neither of those cause the state dropdown to update.
So i was wondering if it was possible to click an option in the country dropdown like a normal human would, or if there was another way to select an option in the country dropdown that would cause the states to be updated.
This was marked as duplicate to Chained Select Boxes (Country, State, City) in a different thread. I am asking a different question though, im not trying to make the state dropdown change based on country, it already does that (when i select a dropdown option as a human). Im trying to select a country dropdown option with javascript and still have the state dropdown values change as if i was selecting a country as a human.
EDIT:: Found two scripts in the page that have something to do with it: here they are:
<script id="states-USA" type="text/x-tmpl">
<option value=""></option>
<option value="IL">IL</option>
<option value="NY">NY</option>
</script>
and
<script id="states-CANADA" type="text/x-tmpl">
<option value=""></option>
<option value="SK">SK</option>
<option value="YT">YT</option>
</script>
If i change values in those scripts, it changes what appears in the state dropdown after selecting the country. I couldnt find anything that calls those scripts in the page. Is it possible to call those scripts from the chrome extension or something like that?...
I am trying to make a placeholder for an input field that is a drop down list. But somehow it doesn't work.
The following is an example on how to define a placeholder for a drop down list:
<select>
<option value="" disabled selected>Please Select Something</option>
<option value="Foo">Foo</option>
</select>