Here are two different datalist one with patient filenumber other with state
<input type="list" class="form-control" name="patient" list="patient-list" placeholder="Enter Patient file number">
<datalist id="patient-list">
<option value='49'>pc123</option>
<option value='48'>pc162</option>
<option value='47'>pc183</option>
<option value='45'>pc193</option>
</datalist>
<input type="list" class="form-control" name="state" list="state-list" placeholder="Enter state">
<datalist id="state-list">
<option value='delhi'>delhi</option>
<option value='mumbai'>mumbai</option>
<option value='Haryana'>Haryana</option>
<option value='Gurgaon'>Gurgaon</option>
</datalist>
When you open drop down menu for both you will notice input for patient show value & innerHTML both and inverted(on clicking it enters value inside input field). And in State input it just simply show state
What's the reason of these different behaviors?
I want to input to show just innerHTML of option like state input and have different data in value & innerHTML
While I cannot answer your exact question, I.E. "What is the reason of this", I can tell you why it happens.
As a result of the intended functionality of the program running the code (whichever web browser you're running) the .innerHTML attribute is shown to the right of the option element only if the .innerHTML value and the .value value differ.
Here is a fiddle showing this in action, I've changed the first option to have the same .innerHTML value and .value value as an example: https://jsfiddle.net/87h3bcwd/
Further Reading on the Datalist Element that I found useful in answering this question: http://www.w3.org/TR/html5/forms.html#the-datalist-element
Code:
<input type="list" class="form-control" name="patient" list="patient-list" placeholder="Enter Patient file number">
<datalist id="patient-list">
<option value='49'>49</option>
<option value='48'>pc162</option>
<option value='47'>pc183</option>
<option value='45'>pc193</option>
</datalist>
<input type="list" class="form-control" name="state" list="state-list" placeholder="Enter state">
<datalist id="state-list">
<option value='delhi'>delhi</option>
<option value='mumbai'>mumbai</option>
<option value='Haryana'>Haryana</option>
<option value='Gurgaon'>Gurgaon</option>
</datalist>
Using <datalist> doesn't work like <select>. It always displays the value attribute and doesn't let you change it by default.
This answer shows how to display different text if you need to - it consists of using a data- attribute and processing it with JavaScript:
Show datalist labels but submit the actual value
Related
I have following select tag code in angular 7
<select class="form-control fixed-select" name="country" #country=ngModel
[(ngModel)]="employeeObject.address.country.id" (change)="onCountrySelect($event.target.value, false)"
required>
<option value="" selected disabled>Select country</option>
<option *ngFor="let country of countries" value={{country.id}}>{{country.countryCode}}</option>
</select>
Default selection is not working even I used SELECTED attribute.
How to solve this?
Your variable country must be have empty string as value to match with your option.
<label>Mark All Present:</label>
<input type="checkbox" name="checkall" ng-model="checkall">
<select name="status{{$index}}" ng-model="attendance_data[$index].status" required>
<option value="">Select Status</option>
<option value="Present" data-ng-selected="checkall">Present</option>
<option value="Late">Late</option>
<option value="Absent">Absent</option>
</select>
<span ng-show="submitted && attendance_form.status{{$index}}.$error.required">is Required</span>
On click on checkbox value selected as present,
but at the time of submission it shows is Required.
If i selected value with mouse on by one its working.
Quick look at the ngSelected documentation: Note: ngSelected does not interact with the select and ngModel directives, it only sets the selected attribute on the element. If you are using ngModel on the select, you should not use ngSelected on the options, as ngModel will set the select value and selected options.
You should update your checkbox to set the select model value appropriately on ngChange.
how can I disable an option in Datalist?
<input type="hidden" name="Town_Group" id="frmTown_Group">
<input name="Town" id="frmTown" list="frmTown_List">
<datalist name="Town_List" id="frmTown_List">
<option value="London">London</option>
<option value="Zurich">Zurich</option>
<option value="|" disabled=true >Italian</option>
<option value="Turin">Turin</option>
<option value="Milan">Milan</option>
<option value="Rome">Rome</option>
<option value="Naples">Naples</option>
<option value="|" disabled=true >French</option>
<option value="Bordeaux">Bordeaux</option>
<option value="Lion">Lion</option>
<option value="Paris">Paris</option>
</datalist>
I tried with disabled, the effect was that the option has disappeared.
Thanks Giovanni Rossati
In that case you can use readonly attribute like this, I wouldn't recommend this
<input type="hidden" name="Town_Group" id="frmTown_Group" />
<input name="Town" id="frmTown" list="frmTown_List" />
<datalist name="Town_List" id="frmTown_List">
<option value="London">London</option>
<option value="Zurich">Zurich</option>
<option value=" " readonly>Italian</option>
<option value="Turin">Turin</option>
<option value="Milan">Milan</option>
<option value="Rome">Rome</option>
<option value="Naples">Naples</option>
<option value=" " readonly>French</option>
<option value="Bordeaux">Bordeaux</option>
<option value="Lion">Lion</option>
<option value="Paris">Paris</option>
</datalist>
This is the only way because
Datalist vs Select:
I guess this is what you want, but there is no comparison. Datalist
is different, Select is different.
datalist is used for autopopulating results from the list, based on
user input, while select doesn't do any magic, it just shows all
options it has.
so this makes clear that there shouldn't be any preselected value in
datalist (as it is used to auto populate, on user interaction). thus
it cant be readonly
select on other hand is different, it can have a default value, thus
it can be readonly.
And yes what you said: "If you desire readonly or disabled, then use a select tag", yes, according to me its true, coz you cant set anything as selected in datalist, but you can in select.
I have a menu page & I have few options. When I click any option, the page should redirect to a login page. Where in the login page, I have a select drop down which contains 4 options. Based on the menu selection, I need to display option which should be the default selected. That is if I click on supplier option in the menu, I need to display supplier option selected in the login page.
<a [routerLink]="['/login', {'params': 2}]"> Go </a>
So I'm just passing a parameter in URL & based on this I'm trying to select an option in the login page.
<select name="role" class="form-control input-xs input-sm input-md" [(ngModel)]="role">
<option *ngIf="{"params":"2"}" value="" disabled>Login as</option>
<option *ngIf="{"params":"3"}" value="1" selected="selected" >Supplier</option>
<option *ngIf="{"params":"4"}" value="2" selected="selected">Customer</option>
<option *ngIf="{"params":"5"}" value="3" selected="selected">OEM</option>
</select>
I'm not getting my expected result. Can somebody help me with this?
Your question is so general but I mention a sample answer. I hope it can help you.
In select tag, if you want to set a value as default you should set selected="selected" for it but in angular, you can use it as dynamic and bind it to a variable like [selected]="something === true".
If you write something like below i.e
<select name="role" class="form-control input-xs input-sm input-md">
<option value="" [selected]="myUrl === 'Login'">Login as</option>
<option value="1" [selected]="myUrl === 'TSP'">TSP</option>
<option value="2" [selected]="myUrl === 'Telemarketer'">Telemarketer</option>
<option value="3" [selected]="myUrl === 'TRAI'">TRAI</option>
</select>
Then declare myUrl in your typescript file public myUrl: string;
Now just set myUrl value to each route you would like its name to be the default.
See also Stackblitz
If the below code order status is equal then selected same will displayed in drop down.
{{ordsts.statusName}}
<select name="status" required>
<option selected disabled>status</option>
I have set required attribute in html select.
My first option set selected disabled for display text.
However it will cause required attribute not working.
anyone know how to solve this problem?
Set <option>'s value to empty string ('').
Updated Code
<select name="status" required>
<option selected disabled value="">status</option>
<!-- Additional options here (at least one should not be disabled) -->
</select>
Explanation
select will return the value of the selected option to the server when the user presses submit on the form. An empty value is the same as an empty text input → raising the required message.
More info (w3schools)
The value attribute specifies the value to be sent to a server when a form is submitted.
Example
document.querySelector('form').onsubmit = (e) => {
e.preventDefault();
const status = e.target[0].value;
console.log(`Your status is: "${status}"`);
}
<form>
<select name="status" required>
<option selected disabled value="">Select a status...</option>
<option value="Good">Good</option>
<option value="Bad">Bad</option>
</select>
<input type="submit" value="Submit">
</form>