I have a form that use jquery mobile to generate. I have a dropdown list that initially set to be disabled.
<div data-role="fieldcontain">
<label for="role-edit" class="select">Project Role:</label>
<select name="role-edit" id="role-edit" data-native-menu="false" disabled="disabled" class="edit-projectinput">
<option value="Admin">Admin</option>
<option value="Project Manager">Project Manager</option>
<option value="User">User</option>
</select>
</div>
I would like to enable the disabled selectmenu using jquery.
I tried
$(".edit-projectinput").selectmenu("enable");
But it doesn't work for me.
Could you please instruct me how to enable the disabled selectmenu, and if possible, show me how to disable one.
This is the demo: http://jsfiddle.net/lightbringer/dpv2h/1/
Just do :
$(document).ready(function(){
$("select.edit-projectinput").selectmenu("enable");
});
Demo
Remeber than there will be 2 items with the class .edit-projectinput one the real select that is converted to select menu widget and then the one default selected span element in the widget, so just specifically select the one that matters. Your menu is already initialized just a matter of calling enable method on it.
You have to intialize selectmenu first,
$(".edit-projectinput").selectmenu().selectmenu("enable");
and also use unique class name for the select options.
I know this is an older post, but came across the same issue in my code and found the issue, so posting here for others. Everything I saw online said to use:
$("selectId").selectmenu("disable");
It didn't work. No error, just not disabling the menu.
The fix was a simple # before the ID:
$("#selectId").selectmenu("disable");
Now it disables, no issue :)
Related
HTML
<label for="fld1">Module</label>
<span class="control"><select id="fld1" name="mod">
<option value="Account" selected>Account</option>
<option value="User">User</option>
</select></span>
<label for="fld2">Send me an alert</label>
<span class="control"><select id="fld2" name="alert">
<option value="1" data-params='{"mod":"Account"}'>when my balance...</option>
<option value="2" data-params='{"mod":"User"}'>when my login...</option>
</select></span>
So this is existing code that someone else worked on and is no longer a resource.
This little sample just changes the second select list based on the selected item in the first select list. This works just fine in FF and Chrome and after some digging I've been told that one can not hide options in a select list in IE.
I've also read up on this question here but still drawing up short on getting it working for IE. Can anyone advise? Thanks.
jsfiddle
remove instead of hide as shown in the linked post seems to work in IE. Another possible implementation is to empty the option list and add only the options in question:
var alertselect, modselect, orgalerts;
var showAlerts = function (module) {
alertselect.empty().append(
orgalerts.filter(function () {
return $(this).data('params').module === module;
}));
};
Of course for this to work, you have to store the original options:
orgalerts = alertselect.children();
Fiddle
I am building a site and am having problems with select options not showing and I am not too sure what is going on.
For example, I have this page: http://bit.ly/182gqK9
If you click on the "Choose an area..." select dropdown you will see 3 options, the third is slightly cut off for some reason (not sure why that is), but if you look in the source there is clearly 6 options...
<select id="area" name="attribute_area">
<option value="">Choose an area...</option>
<option value="Area 2">PO1 - PO9</option>
<option value="Area 1">PO12 - PO17</option>
<option value="Area 2">SO14 - SO19</option>
<option value="Area 2">SO30</option>
<option value="Area 1">SO31</option>
</select>
I disabled JavaScript in FF and it seems to fix the issue, but if I remove all scripts from the page, the problem persists.
I also have a similar equally strange issue on this page: http://bit.ly/1aMTMJY
With that page, if you click on the select, it shows 4 options, if you click off it and back onto it, it displays 5 options. When again there are in fact 6 options.
It looks like your JavaScript is dynamically removing options from the select. When I disable JavaScript, I see the list of 6 options shown in your question. When I enable JavaScript and inspect the HTML, this is what I see:
<select id="area" name="attribute_area">
<option value="">Choose an area...</option>
<option value="Area 2" class="active">PO1 - PO9</option>
<option value="Area 2" class="active">SO14 - SO19</option>
<option value="Area 2" class="active">SO30</option>
</select>
Do you have code somewhere that updates the list of options on the fly?
The fact that disabling JS fixes the problem means that JS must be causing the problem. You say that you still see the problem even when you remove all JS from the page. What happens if, after removing all the JS, you also disable JS in the browser?
If all the JS has truly been removed, then disabling it should have no effect. On the other hand, if disabling it still fixes the problem, then there must be JS still hanging around somewhere - perhaps because the JS is being cached.
You say that you don't have any code that is explicitly trying to update the options on the fly, but perhaps some code is doing this inadvertently or indirectly.
I'm trying to create two searchable dropdowns, one above the other.
I'm using jquery's ".searchable" attribute, and i get the known IE 6-8 bug, that the dropdowns overlap:
I tried to change the z-index of both of them, and changed the positioning to "position:absolute", but I think that something with the jquery screws it up.
<select name="courseID" class="dropdownSearch" id="courseID" style="position:relative;z-index:100">
<option>...</option>
</select>
<select name="sessionDate" class="dropdownSearch" id="sessionDate" style="position:absolute;z-index:-1">
<option>...</option>
</select>
javascript:
$(".dropdownsearch").searchable();
Thanks!
I would like this dropdown select to show an image with an alt text in front of the options, how can I do this?
<form>
<select onchange="window.open(this.options[this.selectedIndex].value,'_blank')">
<option value="#">Select one</option>
<option value="#"></option>
<option value="http://www.url1.com">www.url1.com</option>
<option value="http://www.url2.com">www.url2.com</option>
<option value="www.url3.com">www.url3.com</option>
</select>
</form>
Thanks a lot!
It is not possible to show images in an html <select> - you would have to use a custom solution like this one: http://ivaynberg.github.io/select2/
That is not a button!, it a select dropdown.
You should use ddSlick which is a free light weight jQuery plugin that allows you to create a custom drop down with images and description.
I hope this helps
DOM model doesn't allow img elements inside option elements, so you cannot put image into a select. Please have a look at an HTML language reference. But you can use JavaScript or jQuery to put an image at the left or right of the menu whenever a new option is selected.
However, in Firefox you can just add background image to option:
<select>
<option style="background-image:url(image1.png);">OPTION1</option>
<option style="background-image:url(image2.png);">OPTION2</option>
<option style="background-image:url(image3.png);">OPTION3</option>
</select>
And in other browsers the only way of doing that would be using some JS widget library, like for example jQuery UI Selectable.
olsn's link is also a good example.
I have a select with some values in it. each value loads a different webpage.
I want the default value that always shows to be "Select page".
How can I highlight the option for the current page when the user clicks on the dropdown?
By highlight i mean either have it selected or change its background colour or something.
HTML:
<select id="siteId" name="siteId" onchange=".....">
<option value="">Select a page</option>
<option row="1" value="68067">MAIN SITE</option>
<option row="2" value="88616">A</option>
<option row="3" value="88617">B</option>
</select>
EDIT: this select is created dynamically. I can only edit it with java-script after the page renders
If you are looking for jQuery solution then :eq() and attribute selector will be your best bet to look for. I have done something: http://jsbin.com/ojexuh/1/edit
first with :eq()
$('select option:eq(2)').css({"background":"green", "color":"white"});
and attribute selector like this one:
$('select option[row="1"]').css({"background":"red", "color":"yellow"});
option does support background colors within a select. I just set up a simple class to highlight it, as seen via here.
You can add a class like this
$('current page selector').addClass('current');
You could also just manually set it with the css function
$('current page selector').css('background-color', 'red');
You don't really have enough information for me to help you determine how to find the current page. I recommend having some way to tell from the value of the option that you can compare to the current window.location.
There's a lot of variability in browser+OS support for this. Taking Chrome as an example, the dropdown doesn't appear to accept any styling on OS X, but on Windows, background colors can be assigned both in a stylesheet and inline style attribute:
<style type='text/css'>
.highlighted {
background-color: yellow;
}
</style>
<select name='whatever'>
<option value='1'>one</option>
<option value='2'>two</option>
<option value='3' style='background-color: green;'>three</option>
<option value='4' class='highlighted'>four</option>
</select>
Again, both methods work on windows, neither on OS X.
If you want a solution that works everywhere, you need to build your own dropdown control.
Set selected="selected" for the option you want to be the default.
<option row="3" value="88617" selected="selected">B</option>