for some reason the default option that I want is not showing up. When I had a empty option "Select Job Status" as the default it worked. It doesn't work when the value="" is not empty. But when I created a plunkr for this post it works fine?? What could be causing it not work in my project?
newplunkr
<label style="margin-left:33px">Status:</label>
<select style="width: 100px" ng-model="currentItem.JobStatus">
<option value="Active" selected>Active</option>
<option value="InActive">InActive</option>
<option value="Complete">Complete</option>
</select>
This form is for creating a new object, so the ng-model is not binding to something that would already have data.
I think you answered this when you stated:
... the ng-model is not binding to something that would already have data
Currently there is no currentItem defined in any scope, so trying to bind to the JobStatus property of an undefined variable will result with nothing.
Edit: I took too long to type this, so #Scott beat me to it.
If I understand your problem correctly you want default option. Can't you use something like below.
<select style="width: 100px" ng-model="currentItem.JobStatus">
<option value="" selected>Select</option>
<option value="Active">Active</option>
<option value="InActive">InActive</option>
<option value="Complete">Complete</option>
</select>
Is this what you are looking for?
Thanks
Related
I've made a select in html that looks like this <select name='select' id='select'><option value='val1'>Val1</option><option value='val2'>Val2</option></select>. Is there a way to set the default value of select to something like "pick a value"? Not as an option, but just the text of the select.
You can use the selected attribute within the option to select a default response. If you add the option disabled and hidden then this will be an invalid option.
<select name='select' id='select'>
<option value='val1' selected disabled hidden>Choose option</option>
<option value='val1'>Val1</option>
<option value='val2'>Val2</option>
</select>
Why not just have another option that doesn't have a value and give it the option of selected?
<select name='select' id='select'>
<option value='val1'>Val1</option>
<option value='val2'>Val2</option>
<option value='' selected>Choose Value</option>
</select>
Then in your php or whatever server side test to make sure you aren't accepting an empty value, or use js to not allow the form to submit if the value is blank?
With HTML one can set the default selected item like this:
<option value="blaah" selected>
But how to do it with HTML5 and DataList select?
Not per se. Just set the value as normal.
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" value="Strawberry" />
<datalist id="ice-cream-flavors">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
</datalist>
Of course, clicks in the input will be filtered by the text already there, so users will have to delete it to get the list of suggestions back.
I had such a workaround that I added the default value into placeholder and then with the server-side language (I used PHP but you can do it with whatever you use) I check if the POST/GET is empty then it means default value.
Then I added into CSS:
::placeholder {
color: black;
}
So now it also looks right and doesn't give the user a feel that it's a placeholder and something needs to be done.
I am trying to show content depending on the option selected from the user. I tried this way
<select class="form-control" id="Intervencion" >
<option selected disabled></option>
<option (click)="show">Yes</option>
<option>No</option></select>
<div *ngIf="show"><p>Text to show</p></div>
I do not understand the problem. There is a special directive for this?
... You don't seem to know how basic HTML works. Sorry to say that, but you have to be aware of what you're doing is completely barbaric.
Here is the solution for you :
<select [(ngModel)]="intervencion">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<div *ngIf="intervencion === 'yes'">Text to show</div>
That being given, you should really follow Angular's tutorials, because that's one of the first examples they give to explain how ngModel works.
Perhaps i'm misunderstanding here, but given the following html:
<select value="2">
<option value="1">Something</option>
<option value="2">Something else</option>
</select>
I would expect "Something else" to be the default selected option. However, it does not seem to be. Why is this, and what should I be doing differently?
You use selected attribute on an option element to specify default option.
<select>
<option value="1">Something</option>
<option value="2" selected="selected">Something else</option> // this is default
</select>
select elements do not have a value attribute.
The only way to have a default option is to have selected in the option tag.
<SELECT>
<OPTION>Something
<OPTION SELECTED>Something Else
React JS
Some coding implementations such as ReactJS allow you to use a value attribute with the <select> tag so this would be perfectly valid code:
<select value="2">
<option value="1">Something</option>
<option value="2">Something else</option>
</select>
So if you are seeing code examples like this it is likely because it is in React or other similar library/framework.
Of course, with this approach, typically you would want to specify the value in state, so that it is updateable.
HTML with Attribute Minimization:
However, if you are using purely HTML you must use the selected attribute in your <option> tag as follows:
<select>
<option value="1">Something</option>
<option value="2" selected>Something else</option>
</select>
HTML with Full Attribute Specification:
The above uses attribute minimization, but you can also specify the full form if you want:
<select>
<option value="1">Something</option>
<option value="2" selected="selected">Something else</option>
</select>
The <select> element does not have a value attribute so that is ignored. So, you have a single selection <select> and none of its <option> elements have the selected attribute, that means that the first <option> is taken as the default selection.
I know this post is quite old but in case anyone else is struggling with this you can implement the functionality you are looking for using jquery.
The full code using php would be something like this
PHP
if ($_SERVER['REQUEST_METHOD']== "POST") {
$thing = $_POST['things'];
} else {
$thing ="";
}
HTML
<select name='things' value="<?php echo $thing; ?>">
<option value="1">Something</option>
<option value="2">Something else</option>
</select>
JQUERY
$(function() {
$("select[value]").each(function() {
$(this).val(this.getAttribute("value"));
});
}); //end document ready
This will allow the select options chosen by the user to remain selected
after the page has re-loaded via post instead of returning
to the default values.
You have to use select attribute. in below code, a swift option will be selected by default
<select name="myCar" id="car">
<option value="ind">Indica</option>
<option value="swf" selected>Swift</option>
</select>
I have a simple HTML form that I'm using to drive site search for a website I'm creating.
Two of the fields should not be used together, such as "make" and "model" of a car. You wouldn't want someone searching for a "Ford Ram Truck," for instance.
How can I modify my form so that if a certain value in one of the fields is selected, the other field disappears?
Thank you for your help!
<select name="make">
<option value="item 1">item 1</option>
<option value="item 2">item 2</option>
</select>
<select name="model">
<option value="item 1">item 1</option>
<option value="item 2">item 2</option>
</select>
<input name="" type="submit" />
You would need to use javascript and hook up to the change event of the radio buttons.
In your javascript you can set the visibility of any form element to hidden or visible (depending on which you want).
You would still need to validate/check on the server side in order to avoid such a search (since javascript may be off or a malicious user might override your client side validation).
I think Chained Select Menu can solve your problem.