Develop Reference

JQuery Mobile custom dropdown issue

I'm facing an issue in selecting the dropdown first value after selecting it for the first time. When the dropdown options slidedown to select, the first value would be selected by default,bcoz of which I'm not able to select the first value. I'm using JQuery mobile framework and I'm writing custom JS to change the dropdown. I need to handle this dropdown only using custom JS and cannot make the dropdown work with this custom logic due to some other issue with my project.
Here first value im referring as 'US' from dropdown
The solution for this issue would be really appreciated. Thanks in advance.
HTML:
<select id="drpDwn">
<option value="" disabled="disabled">select</option>
<option value="US">US</option>
<option value="AU">AU</option>
<option value="NZ">NZ</option>
</select>
JS:
$(document).on('change', '#drpDwn', function () {
var index = $(this)[0].selectedIndex;
$(this).attr('selectedIndex', index);
$(this).find('option').removeAttr('selected');
$(this).find('option').eq(index).attr('selected', 'selected');
$(this).siblings('span').html($(this).find('option').eq(index).text());
});
http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js
http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css

Check out this JSFiddle
The difference maker was modifying:
$(this).find('option').removeAttr('selected');
Into:
$(this).find('option:not(:selected)').removeAttr('selected');
When 'change' was triggered, the selected attribute is added to the new option, so you were stripping it away from everything even the new selection. That's why the option never changed.
Using :not(:selected) came in handy then since it will only strip away the attribute from things that weren't the current selected option.

Dropdown with key input search of elements

I need your valuable suggestions and guidance to help me get out of this tricky situation.
I have a scenario, where I need to build a Dropdown like the below one.
<ul class="dropdown">
<li>America</li>
<li>Brazil</li>
<li>China</li>
<li>Denmark</li>
<li>Egypt</li>
</ul>
The desired functionality is that I should be able to use keyboard input to scroll through the items, lets say i press key "E" on my keyboard it should hover/focus on Egypt.
I realize this functionality cant be achieved using UL>Li, However we can use Select tag to implement this functionality.
<select class="dropdown">
<option>America</li>
<option>Brazil</li>
<option>China</li>
<option>Denmark</li>
<option>Egypt</li>
<select>
But when we use select tags, we cannot style the dropdown, Especially like CSS padding doesnt work on select tag dropdowns on most broswers.
All I wanna ask Is, How can I build a drop-down with these 3 functionalities :
1.Open on Tab key press
2.Browse listed items using key input.
3.Style the dropdown for cross broswer compatibility.
I did spend ample time in finding a solution for this online, I dint find any perfect solution apart from this plugin
https://silviomoreto.github.io/bootstrap-select/
I'd regret to say that I'm not allowed to use any external plugins at work.To achieve this only tools I'm allowed to use is Bootstrap, jQuery, Javascript ,CSS ,HTML and cant use angular.
Can anyone help me with this.

Unfortunately, it’s not possible to style a <select> dropdown consistently across all browsers. Bootstrap Select and other similar plugins (e.g. Chosen) use JS and custom markup to create a faux <select>, which is bad for accessibility (see https://vimeo.com/84970341#t=614s).
Personally, I would use a <select> element and live with the default browser styling.
You can style the <select> toggle itself, though, without hurting accessibility. Just not the dropdown. Here are some examples:
http://adam.co/lab/jquery/customselect/
http://www.456bereastreet.com/lab/custom-select/
Another option could be to code the countries as a list of links and make it expandable with JS. Just be sure to add the appropriate aria roles.
http://edenspiekermann.github.io/a11y-toggle/
http://heydonworks.com/practical_aria_examples/

1.Open on Tab key press
Open on Tab key press of ul is a very bad solution because Tab key does various functions in the window as well. The dropdown toggle will become buggy as the focus has to be on the window. If you are using an input element like select then that's completely fine.
Still I have created a small mock-up using ONLY javascript as you are not allowed to use any external libraries. Created using ul.
Have a look at this fiddle : JS Fiddle
HTML :
<div>
<ul id="dropdown">
<li class='highlight' data-key='A'>America</li>
<li data-key='B'>Brazil</li>
<li data-key='C'>China</li>
<li data-key='D'>Denmark</li>
<li data-key='E'>Egypt</li>
</ul>
</div>
CSS :
ul {
list-style: none;
display: none;
}
ul li.highlight {
background: yellow;
}
Javascript :
document.addEventListener("keydown", keyDownListener, false);
function keyDownListener(e) {
var keyCode = e.keyCode;
var dropdwn = document.getElementById('dropdown');
if (keyCode == 9) {
dropdwn.style.display = (dropdwn.style.display != 'none' ? 'none' : 'block');
} else if (dropdwn.style.display != 'none') {
var items = dropdwn.getElementsByTagName("li");
items[0].classList.remove("highlight");
for (var i = 0; i < items.length; ++i) {
var aKey = items[i].dataset.key;
if (String.fromCharCode(e.keyCode) === aKey) {
for (var j = 0; j < items.length; ++j) {
items[j].classList.remove("highlight");
}
items[i].classList.add("highlight");
}
}
}
}
Explanation :
Add a keydown event listener on your document.
On press of Tab key show/ hide the dropdown.
On press of any other key, if the dropdown is visible check the data-key of each li and match it with the key pressed. If matches, highlight the respective list item.
And again a reminder, toggle of ul dropdown on Tab key press hurts accessibility. If it is a select dropdown then it's fine.

Deselect top option in <select> - bootstrap multiselect

I have a bootstrap multiselect html element that i fill with data from a web service call that gets a list of regions in New Zealand. I need to load those options into the <select> and not select the top option by default.
I have tried everything that is done via the bootstrap multiselect built in functions and options. Nothing will work. So i am resorting to vanilla javascript or vanilla jquery to go straight into the plain html and deselect the first option.
All work on this can be done in this jsfiddle
I had to copy paste a minified external resource (xml2json.min.js) into the top of the javascript editor because it wasn't playing nicely when I tried to add it as an external resource.
I have tried this:
$("ul.multiselect-container").find("li").removeClass("active");
And it doesn't work. It removes the active class but doesn't deselect the option. How do I deselect the option?
I have tried this:
$("ul.multiselect-container").find('input[type="radio":checked]').prop('checked', false);
It doesn't deselect the option.
Please see if you can deselect the top option of the select.
So the jsfiddle at url same as above but ending in 182 is my refactoring to try and make it easier for people to understand but it didn't end up working correctly on my friends laptop.
When using the plugin as a <select multiple=true> it doesn't select the top option by default. However I need that same behaviour with a normal <select>

I just had a look in the plugin, And here is what I understood, To remove default selection you must have your selection set as multiple='multiple', This is when you can see a Checkbox in the drop down rather than radio buttons.
If you do not put this multiple option set then you will end up in having a radio button and this will set the first value by default. Here is the Fiddle which doesnt not select any default value. I just added the option multiple='multiple' to your dynamic select tag.
To have the option multi select set and also be able to select only one at a time use the below code. You need to replace your code block with this one
$("body").prepend("<select id=\"a-select\" multiple='multiple' >"
+ optionsText +
"</select>");
$('#a-select').multiselect({
on: {
change: function(option, checked) {
alert('sdd');
var values = [];
$('#a-select').each(function() {
if ($(this).val() !== option.val()) {
values.push($(this).val());
}
});
$('#a-select').multiselect('deselect', values);
}
}
});
Logic taken from http://davidstutz.github.io/bootstrap-multiselect/#further-examples, see the 5th example from here which says Simulate single selections using checkboxes.

I have redefined the method "deselect" as follows.
this.deselect = function() {
$('input[type="radio"]:checked').attr('checked', false);
$(".multiselect-selected-text").text("None selected");
}
JsFiddle Demo

Add an empty option to the top of the select element.

Multiple Dynamic Javascript Dropdowns?

I have currently got a 2-tier javascript drop down box attached to my form, and i am looking to add another 3-tiers, but completely seperate to my current javascript and can't unfortunately figure it out (quite new to javascript :( )
Here what I have so far, it all works ( not even sure what framework to select on fiddle for it to display properly lol :( the embarassment haha
Any help is appreciated <3

This will probably be enough code for you to get the idea.
jsFiddle here
I used jQuery to get handles to the various DOM elements. Here is a quite decent resource for browsing all jQuery selectors, events, effects, css, etc - despite the source. (Just keep hitting Next Chapter)
First, this is your code for catching the optone select element's change event, removed from inline javascript (which is never a good idea):
$('select[name=optone]').change(function() {
var selval = $(this).val();
setOptions(selval);
});
Simple enough, yes?
I left your first setOptions function as is, because it works. However, I wrote the next function setOptions2() in jQuery, to show you how much less typing is required.
To catch the next select element's change event:
$('select[name=opttwo]').change(function() {
var sel2val = $(this).val();
alert('You selected: ' + sel2val);
setOptions2(sel2val);
$('#selthreeDiv').show();
});
Notice in my jsFiddle that I added a hidden div containing the 3rd select control, and I display that control when the 2nd select is changed...
Hopefully this will be of assistance.

ok I did something like this and it worked for me.
your new javascript
function setOptions2(chosen) {
var selbox = document.myform.optthree;
selbox.options.length = 0;
if (chosen == "1") {
selbox.options[selbox.options.length] = new Option('Worked', ' ');
}
}
then added some new html
<select name="opttwo" size="1" onchange="setOptions2(document.myform.optone.options[document.myform.optone.selectedIndex].value);" >
<option value="Please Select Prompt Category" selected="selected">Please Select Prompt Category</option>
</select>
<select name="optthree" size="1">
<option value="Please Select Prompt Category" selected="selected">Please Select Prompt Category</option>
</select>

Highlight a select option using javascript

I have a group list as select like that:
<select id="groups">
<option value="g1">G1</option>
<option value="g2">G2</option>
<option value="g3">G3</option>
</select>
I have a contact list which basically contains:
Name = group
============
Casper G1-G2-G3
Andy G1-G2
Mark G2-G3
When the user check the checkbox for Casperand click Edit button so G1-G2 and G3 should be highlighted (Selected) in the group list. When I get the value of the group field in the contact list, all of the three groups come with comma "G1-G2-G3".
Your help is highly appreciated.
Thanks,

Some tips, I believe it's good for you to solve this problem yourself ;)
Seems that Casper belongs to multiple groups, so you should set multiple="true" to your select
When you check Casper, retrieve the group data associated with him, say ["g1", "g2", "g3"]. Loop over this list, and set each option with the value to selected.
If you want to support IE6, you need also add a class, say selected to the selected option.
The CSS rule { option.selected: background: yellow} will do the trick.
If you only target on modern browser, option[selected]{ xxx } works well.

You could make the edit button assign the selected attribute to the options then use css to style it.
option[selected] { background: #f00; }

OK, so I guess there is a checkbox for Casper that when clicked calls the following function:
function(groupstring) {
// groupstring is something like "G1-G2"
var groups = groupstring.split("-");
var options = document.getElementById("groups").options;
for (var i=0; i<options.length; i++) {
var opt = options[i];
opt.defaultSelected = groups.indexOf(opt.value) > -1;
}
}
I'm not sure whether you want to use the selected or the defaultSelected property. Note that your select should have multiple set to true (<select id="groups" multiple>).