I want to hide part a dropdown list select option and then use the hidden part to filter the list. i.e. A list of names with a hidden location for each name. Then I can use Javascript to filter the list based on the location of the people. I tried the following:
<form>
<select>
<option value='x'> Visible Name <p hidden> Invisible Location</p></option>
</select>
</form>
However it's not allowing me to hide inside the option element. Is there a way to hide HTML here? I tried hidden and display:none, neither was working. Is there a way to do this?
you can't do that.
try this https://select2.org/ or https://harvesthq.github.io/chosen/
Related
I want to create a select that looks like a collection in Materialize CSS.
I know that in order to do something like that on plain HTML I need to use the size attribute.
<select id="someSelect" size="8">
<option value="3">Blabla</option>
<option value="4">Bla</option>
...
</select>
Howhever, when I add it, it doesn't change anything, and the select is still a dropdown and not a list.
How could I create a selectable list (only one selection at a time) in Materialize CSS?
EDIT:
bahman parsamanesh mentioned in his comment the usage of <div class="collection"> and <a> inside it, which is exactly I was looking for, but how could I handle it's onChange?
I am using select2 plugin for dropdown list on angularjs application. I want to show text both left and right.
<select ng-model="selEmployee" id='selUser' name="selEmp" ng-disabled="currentmode == 'edit' || currentmode=='view'">
<option ng-repeat="employee in employees" value="{{employee.Ldap}}">
{{employee.FirstName}} {{employee.LastName}} ({{employee.Email}})
</option>
<option value="" style="display:none">Please select</option>
I want to show Firstname and lastname to the left side and email to the right.
Can you please help. Thanks in advance.
There are only a few style attributes that can be applied to an element.
This is because this type of element is an example of a "replaced element". They are OS-dependent and are not part of the HTML/browser. It cannot be styled via CSS.
There are replacement plug-ins/libraries that look like a but are actually composed of regular HTML elements that CAN be styled.
it's not possible, as the styling for these elements is handled by the user's OS. MSDN: Option
Except for background-color and color, style settings applied through the style object for the option element are ignored.
Here is my current code:
<select [(ngModel)]="items">
<option *ngFor="let item of items" [ngValue]="item " {{item .symbol}} : {{item.companyName}}</option>
</select>
The problem is this is a dropdown that is not fully expanded by default. My goal is to have this list act similar to how Google has their search; A fully expanded list that updates based on the input.
I have the binding correct, but I can't seem to get the HTML correct to where it's always expanded and there is no empty entry for the first element.
Are the Select/Option tags the incorrect tags to use?
I can't find any other tags to use. Anything in Angular?
I don't know if natively you can have this feature inside a browser. But you can write one component to do this job. Basically, it'll have two parts, one input, and one panel with some help via Bootstrap.
<input type="text" class="form-control input-xs">
<ul class="dropdown-menu"></ul>
When you type in anything in the input, you can make the list of items displayed. After you select one item, the list can disappear. In terms of style, it'll be very similar to http://getbootstrap.com/docs/3.3/javascript/#dropdowns
Then you can wrap up everything inside an angular component. I know it's a long answer.
I want to ask about html dropdown menu. As we know, that option tag in html only support text. However, I need to create a drowp down menu that show list of image. I've searched for it. And I found several ways, including using css or jquery. However, that's not what I want. Here is, what I want to create:
<option value = blablabla><img src = "img/blbalba.txt"></option>
The code above is not working. Is there any sugestion to display dropdown menu like that?
Thank you for your help.
As You can't do that in plain HTML, but you can do it with JQuery.
Right now You can do like this
<select>
<option value="img1" style="background-image:url(images/img1.png);">image 1</option>
<option value="img2" style="background-image:url(images/img2.png);">image 2</option>
<option value="img3" style="background-image:url(images/img3.png);">image 3</option>
<option value="img4" style="background-image:url(images/img4.png);">image 4 </option>
</select>
Browsers will only render text inside a select tag, so, if you wan to use a selector that shows images instead of text, you cannot use a select you'll need to build your own selectable object.
That could be quite difficult to do. You can use different premade solutions that people on your situation developed before or try to reinvent the wheel.
Check this :)
A free light weight jQuery plugin that allows you to create a custom drop down with images and description.
What is so cool about this plugin!
Adds images and description to otherwise boring drop downs.
Allows JSON to populate the drop down options.
Converts your HTML select element to ddSlick.
Uses Minimum css and no external stylesheets to download.
Supports callback functions on selection.
Works as good even without images or description!
http://designwithpc.com/Plugins/ddSlick#demo
I'm having trouble displaying the first option in a select element like this: http://jsfiddle.net/L6h9Q/
I want the first option tag to work as a placeholder but the second one is displayed first by default.
you can add selected="selected" attribute to the first option to put it on default.
Disabled items (by definition) cannot be selected. The item that is shown when the page is loaded is indeed selected.
The canonical way around this using plain JS and HTML is to leave that option enabled, then validate your form result upon submission (client- and server-side). If the user has selected the placeholder option ("City..." in your case), then let them know that they have made an invalid selection.
A workaround: http://jsfiddle.net/L6h9Q/2/
Essential part:
Add required to select;
Use select:invalid to make the color gray;
use option:first-child to make the first option gray.
Downside: works only on HTML5/CSS3 supported browsers.
Edit:
Inspired by #Russell, here's a (somewhat) better solution: http://jsfiddle.net/L6h9Q/3/
yes because It will show only enabled values first and then disabled values