Is there anyway to strike out text in a drop down. I'm making an commerce app and looking for a way to demonstrate that an item is on sale. I'd like to do this by showing the old price and the striking this out and showing the sale price next to it.
I tried something like this
<select>
<option value="1">Small Box 10.99</option>
<option value="2">Large Box <del>19.99</del> 15.99</option>
</select>
You could use the Unicode combining character U+0336 LONG STROKE OVERLAY:
"19.99".replace(/\d/g, function (digit) { return digit + "\u0336" })
Result: 1̶9̶.9̶9̶
(It doesn’t look so good when you apply it to the period; that’s why I left that out.)
Here are all the digits with the stroke applied, if you want to just copy them into your server-side script:
0̶1̶2̶3̶4̶5̶6̶7̶8̶9̶
This is not possible if you're using a standard HTML select. Any markup within the <option> tag will be ignored:
<!-- The style in the span tag is completely ignored -->
<option value="1"><span syle="color:red">Small</span> Box 10.99</option>
The closest you're going to get to your desired functionality with the HTML select is by using the "disabled" property. Example:
<select>
<option />
<option value="1" disabled="disabled">Small Box 10.99 (Original Price)</option>
<option value="1">Small Box 6.99 (Sale Price)</option>
</select>
Here's a working fiddle to demonstrate.
No. With HTML standard elements you can't have that kind of functionality. To solve that problem you have to create your own element.
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.
Ok, so this is a wierd one and have not seen it before.
I have a simple html dropdown w/ no js attached (yet).
This is using html4(xhtml1?) with transitional doctype.
btw.. i tried with escaping slashes and without, same results. (/)
<select id="myDropdown" name="myDropdown">
<option value="option1" selected="selected">Contact / Email Customer Care</option>
<option value="option2">Group / Private Tour</option>
<option value="option3">Option3</option>
<option value="option4">Option4</option>
<option value="option5">Option5</option>
</select>
When I do a hard reload (ctrl+f5, or ctrl+shift+R) It loads the correct option in the box (option 1).
However, if I hit just plain F5 for a soft refresh, it loads option2 as the selected option ONLY if option 1 is selected. If option 3, 4 or 5 are selected, it doesn't change. But if option 1 is selected, it changes to option 2 every time on a page refresh.
Any ideas why this is happening? It's extremely frustrating and I don't see anything about it online.
Thanks
It appears to be a strange Firefox behavior, I can see it in versions of Firefox up to and including 27 (current). I'd suggest logging a bug/sending feedback.
to solve the issue though is fairly simple... if you want the drop-down to always reset on a page load just a simple bit of script after the combo will force that (and doesn't have a negative impact on other browsers
<script>
// console.log(document.getElementById("myDropdown").value)
document.getElementById("myDropdown").selectedIndex = 0
</script>
if the selected value is likely to change, then you'll want the selectedIndex to match whatever value you're adjusting the selected to indicate.
Oh, and just a note on the selected="selected" ... that attribute would usually be just selected but
<option value="option1" selected>Contact / Email Customer Care</option>
doesn't make a difference here
Same idea as in the answer by Offbeatmammal but a bit more automated, assuming that you can use the same attribute on all the selectors in the page (else restrict using a class or id):
<script>
function fix_selectors_positions()
{
selectors = document.querySelectorAll("select");
selectors.forEach(item =>
item.selectedIndex = item.getAttribute("default_pos")
);
}
window.onload = fix_selectors_positions;
</script>
And then use the attribute default_pos on the selectors:
<select default_pos="0">[...]
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 have a select menu like this:
<select name="mySelect">
<option value="250" selected="selected">250</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
</select>
It comes out looking different depending on OS and I would like it to have a different background. The problem is when I use a standard css background the arrow on the right of the select element remains visible.
select {
background: url(../images/bg_select.png);
}
I would also like to have different background colours when the select list has been opened. The default is often blue and white.
Edit: Looks like I'll have to use javascript. Are there any jQuery plugins to do this?
You may want to look at this: Cut & Paste DHTML Select menu. It uses Javascript to replace the select menu with custom HTML.
all a listener to the select and use jquery to trigger the class
add/remove classes should work fine