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.
Related
When I add display:none to an <option> tag with JavaScript after the page is ready, it wouldn't hide the default or the selected element, it stays on the hidden option unless I change that manually. The option 08:30 is hidden but it's still there as selected, but not an option.
Here is the HTML and there's also a screenshot:
<div class="form-floating mb-3">
<select class="form-select" id="time">
<option value="08:30" style="display: none;">08:30</option>
<option value="08:45">08:45</option>
</select>
</div>
I've tried disabling the <option> tag as well but it does the same and keeps it selected. I need it to jump into an active select option or any other option but not the one I hide or disable.
Update:
I have to use a workaround to get this working. First I've added all <option> tags to the <select> tag, then remove the ones that I don't want:
$('#time').html('
<option value="08:30">08:30</option>
<option value="08:45">08:45</option>
<option value="09:00">09:00</option>
<option value="09:15">09:15</option>
<option value="09:30">09:30</option>
<option value="09:45">09:45</option>
')
$('#time option[value="'09:00'"]').remove()
This works, although doesn't actually solve the issue (I guess that's a bug and hasn't been addressed yet). I would still appreciated an answer to improve the code.
Hello & Welcome Mohsen Salehi,
<option hidden>Hidden option</option>
It is not supported by IE < 11.
Please read more about it here How to hide a in a menu with CSS?
Edit:
You can also add disabled to prevent getting selected.
<div class="form-floating mb-3">
<select class="form-select" id="time">
<option value="08:30" style="display: none;" disabled>08:30</option>
<option value="08:45">08:45</option>
</select>
</div>
I'm new to HTML and trying to use a datalist. I need to limit it to display only 5 items and the rest to be viewed using scrolldown. Is there any way?
My code :
<form>
<input list="Android" name="Android">
<datalist id="Android">
<option value="Alpha">
<option value="Beta">
<option value="Cupcake">
<option value="Doughnut">
<option value="Eclairs">
<option value="Fryo">
<option value="GingerBread">
<option value="HoneyComb">
<option value="Icecream Sandwich">
<option value="Jelly Bean">
<option value="Kitkat">
<option value="Lollipop">
<option value="Marshmallow">
<option value="Nougat">
</datalist>
<input type="submit">
</form>
This is the output of my code
Thanks in advance!
Well, that's not possible to do, the datalist layout is defined by the browser the same as it does with the select tag and there is very little flexibility on customization. Your example comes from Chrome; in Firefox, it shows only 6 items and on Edge it shows something similar with limited size as well.
The proposed solution is using something else rather that using datalist, if you can't live with the datalist design Chrome offers, try some other component with a similar behavior, like dropdown select, autocomplete, autosugest, typeahead, etc.
I have on this check in form:
<label>Check in date </label>
<select id="day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="year">
<option value="1">2012</option>
<option value="2">2013</option>
</select>
As you can see, the user will choose the month, the day and the year on different select boxes, however, only one label should exist for all three.
What would be the proper way to do this with HTML ?
Update:
I'm concerned with the accessibility hit that we may have on developing something like the code above. I mean, a blind user should be able to listen each label in order to fill this form...
The problem with using one label for all three input boxes is that an non-sighted user is not going to know which of three boxes the focus is in because the same text will be read out in each case. There's a number of approaches possible. Maybe the safest is to have a label for each box, but hide those labels off to the left side of the viewport. Another possibility which ought to work, but I haven't tested would be this:
<fieldset>
<legend>Check in date</legend>
<select id="day" aria-label="day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="month" aria-label="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="year" aria-label="year">
<option value="1">2012</option>
<option value="2">2013</option>
</select>
</fieldset>
Following with the answer from #Alohci, you can also use aria-labelledby and reverse the naming reference (which I think is a bit closer to the convention you were looking for):
<label id="date">Check in date</label>
<select aria-labelledby="date">
<!-- ... -->
</select>
<select aria-labelledby="date">
<!-- ... -->
</select>
<select aria-labelledby="date">
<!-- ... -->
</select>
Also note, as per the W3C on labelled-by:
If the label text is visible on screen, authors SHOULD use aria-labelledby and SHOULD NOT use aria-label. Use aria-label only if the interface is such that it is not possible to have a visible label on the screen. User agents give precedence to aria-labelledby over aria-label when computing the accessible name property.
You cannot associate a label element with more than one control. This is described in the definition of label.
You could give each select element its own label.
A better approach is to have a single text input field for a date. Then there is no problem with label. It means more work, since you have to parse the data server-side, and you should also parse it client-side (for checks, so that the user can immediately be informed of problems). But it is better usability (surely it is faster to type in a date than to use three clumsy dropdowns) and better accessibility. You need to decide on a date format and clearly tell the user what the expected format is.
There is no proper way; a label refers to one element. Just point it to the first one.
<label for="day">Check in date </label>
You could also use a specifically-styled <fieldset> if you like semantics, but I think that's a bit overkill. An <input type="date"> is probably the best option here, as it is one element that can be pointed to by your <label>, is more semantic, and can be somewhat friendlier if you implement a good date picker to go along with it.
If you want to stick with the <select>s, try giving each one a title attribute for accessibility.
Trying to improve #Bracketworks answer:
<label id="date">Check in date</label>
<label for="day" id="label_day">Day</label>
<select id="day" aria-labelledby="date label_day">
<!-- ... -->
</select>
<label for="month" id="label_month">Month</label>
<select id="month" aria-labelledby="date label_month">
<!-- ... -->
</select>
<label for="year" id="label_year">Year</label>
<select id="year" aria-labelledby="date label_year">
<!-- ... -->
</select>
See example 1 of MDN's "Using the aria-labelledby attribute".
HTML5's input type="date" might be useful too, particularly if you're using month/day/year select boxes as a way to limit date selection possibilities. This input element supports min and max date attributes, so you can apply your limitations. It's not supported by older browsers, but I've seen smart cookies use jQueryUI's datepicker as a shim (by using capabilities detection to determine type="date" support, then loading in and invoking the datepicker only if it isn't supported natively).
Right now the search_type which JS uses later is always "people" as can be seen in the hidden input field.
How can I make it so that the selected option's value is the value tied to the name "search_type"?
<input type="hidden" name="search_type" value="people"> <!-- This obviously needs to change-->
<div class="medium-4 columns">
<select>
<option value="default">All Categories</option>
<option value="people">People</option>
<option value="items">Items</option>
</select>
</div>
I have tried changing the name of all the options' names to search_type but this did not work. I have also tried other things, but can't figure it out. Any help would be much appreciated.
Here is the Javascript line that calls it:
search_type: $('input[name="search_type"]').val(),
Note: I am working in Zurb Foundation
Simply put, there is no need to add another input field when you already have a perfectly usable one! change your code so that the <select> includes the name attribute, like so, and get rid of the hidden input:
<div class="medium-4 columns">
<select name="search_type">
<option value="default">All Categories</option>
<option value="people">People</option>
<option value="items">Items</option>
</select>
</div>
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