I have a multiple selection SELECT field which I don't want the end user to be able to change the value of.
For UI reasons, I would like to be able to do this without using the disabled="true" attribute. I've tried using onmousedown, onfocus, onclick and setting each to blur or return false but with no success.
Can this be done or am I trying to do the impossible?
I know you mentioned that you don't want to, but I actually think that using the disabled attribute is a better solution:
<select multiple="multiple">
<option value="volvo" selected="true" disabled="disabled">Volvo</option>
<option value="saab" disabled="disabled">Saab</option>
<option value="opel" disabled="disabled">Opel</option>
<option value="audi" disabled="disabled">Audi</option>
</select>
If necessary, you can always give the select a class and style it with CSS. This solution will work in all browsers regardless of scripting capabilities.
Could you do it with an onchange event?
<select onfocus="this.oldIndex=this.selectedIndex" onchange="this.selectedIndex=this.oldIndex">
Your best bet would be to swap out the options within the select box. If you only have one answer in that box, it doesn't matter if it is clickable.
I would, however, try to find another way of doing this as it seems like it would cause frustration for a user. Imagine this user scenario:
"Look, a select box of options."
click
"Hrm, why didn't that work?"
click
click!
"This stupid thing is broken, I'm never coming back here."
If you swap out the select for HTML text, it accomplishes the same goal. This is a fairly simple task for most of the major Javascript frameworks.
#Jack & #17 of 26, good point but the end user will be expecting the select box to be disabled so that confusion shouldn't be an issue.
I should have been clearer about why I couldn't just disable the control.
The application that will be using this will need to disable the selection of the options and there is a requirement that the "locked" control still maintain the look and feel of normal form controls.
Try this trigger.
<select multiple onchange="this.selectedIndex=this.selectedIndex">
<option>1</option>
<option>2</option>
</select>
There is a recent new addition to CSS3 that is 95% compatible with all current browsers except Opera Mini, called pointer-events. Put simply, you can "disable" the default action on a SELECT or any other element, and still be able to perform specific events on it...
You can view Chris Coyier's article on them at enter link description here.
Is this closer to what you're looking for... Sorry that I couldn't provide any of my own coding examples...
Related
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
Actually I develop a web app in html5/php/css/javascript for my mobile devices. (I'm a beginner) I have an "onclick" function on my "option" but with native select widget of devices it's not working.
Is it possible to disable select widget ?
<select class="theme" name="newtheme">
<option id="white" class="white" onclick="createCookie('theme','white',7)">white</option>
<option id="white" class="white" onclick="createCookie('theme','white',7)">white</option>
</select>
Thanks in advance,
With jQuery you could use :
$("#ThemeSelector").on('change', function(event){
// event contains the data from the selected line
createCookie('theme','white',7);
});
Your HTML should look like this:
<select id="ThemeSelector" class="theme" name="newtheme">
<option class="white">white</option>
<option class="white">white</option>
</select>
ID's should be unique!
When developing mobile web apps you should try to avoid using "onClick" and rather use the "tap" events. They perform better and will make your UI more responsive. (They also cause less trouble - e.g. clicks do not always fire on different mobile browsers in some scenarios).
But of course #Robbert 's suggestion to use the "change" event should also work fine.
I just wanted to point that out to, as you said, you're a beginner.
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
How can I put image next to the text in the select menu.
For example this is not working:
<select style="background-color:black; width:150px;color:white;">
<option style="background-image:url(images/english.png);">English</option>
</select>
This is not working. I want to have a little flag first and then name of the language.
The select element does not support that type of thing. It's meant to be a native control that's consistent wherever it's used. You can, however, whip up your own custom drop-down style menu.
Here's one I did (under the graph).Also, here's a jquery plugin that might make it easier for you.
Good luck!
I have a select box (for a customer field) on a complex order form, when the user starts to add lines to the order they should not be allowed to change the customer select box (unless all lines are deleted).
My immediate thought was that I could use the disabled attribute, but when the box is disabled the selected value is no longer passed to the target.
When the problem arose a while ago one of the other developers worked around this by looping through all the options and disabling all but the selected option, and sure enough the value was passed to the target and we've been using since. But now I'm looking for a proper solution, I don't want to loop through all the options because are data is expanding and it's starting to introduce performance issues.
I'd prefer not to enable this / all the elements when the submit button is hit.
How can I lock the input, whilst maintaining the selected option and passing that value to the target script? I would prefer a non-JavaScript solution if possible, but if needed we are running jQuery 1.4.2 so that could be used.
Edit
I've tried to use the readonly attribute with little success, here's the jQuery code I'm using:
$('.abc').each(function(element) {
$(this).attr('readonly','readonly');
});
When inspecting the element with Firebug the readonly attribute had been set, but I can still change the value in the select box?!
This works:
$('.abc :not(:selected)').attr('disabled','disabled');
jQuery will still be looping through the elements behind the scenes, but I seriously doubt you will have performance issues unless your select has thousands of elements (in which case your usability issues will far out weigh the performance issues). The original code must have been doing something wrong.
This works fine
<select disabled="true">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">thre</option>
</select>
Add a hidden field to your form and onsubmit take the value from the select and place it in the hidden field's value
As per the HTML spec, readonly is not supported by the select tag
The element does not accept readonly attribute. Readonly is a wrapper that fix this.
Try this:
https://github.com/haggen/readonly
"select" does not have a readonly attribute. It has only disabled attribute.
http://www.w3schools.com/TAGS/att_select_disabled.asp
So your best best is:
$('.abc').each(function(element) {
$(this).attr('disabled','disabled');
});
HTH
I'd have an idea, that was functional to me:
In my case, when a user selects an option (an account) in a drop-down on a form of an accounting system, e.g., some kind of "expense", that I know that may not be "credited", just "debited", another drop-down that selects the accounting operation (Debit/Credit), changes these drop-down to "Debit".
Then, I "lock" (using "disabled=true") these last "drop-down" in the "debit" option.
The problem that occurred to me these moment, was similar of yours: after disabling the drop-down element, I couldn't receive it in the target, anymore.
So, what I've done:
1 - Changed the option in the second drop-down list, as I said:
document.getElementById("operation").value = "D";
`
2 - Disabled that dropdown:
document.getElementById("operation").disabled = true;
Then, the "cat salt":
3a- Added to the "FORM" element, an "onsubmit"
onsubmit = "validForm()"
3b - On my [java-script] file I added the ["valid-Form"] function:
function validForm()
{
document.getElementById("operation").disabled = false;
}
Voilá!
A simple way to disable any Select is to just disable mouse interaction.
For example:
<select id="complaint_status" name="complaint_status" class="disabledSelect" value="Pending">
<option value="Pending" selected>Pending</option>
<option value="Complete">Complete</option></select>
css
.disabledbutton {
pointer-events: none;
opacity: 0.4;}
The value of Select will be SUBMITted.
Hope it works!!