Develop Reference

Multi select jQuery-Dropdown plugin

I use this plugin.
http://dane.one/projects/jquery-dropdown/demo/#multi-select
https://github.com/daneWilliams/jquery.dropdown
I want use multiple select
$('select').dropdown({
multi: true
});
It's working normal, but initially, when the page was loaded if I have selected options
<select multiple>
<option>Option 1</option>
<option selected>Option 2</option>
<option>Option 3</option>
</select>
And I want add some selected options,
This plugin resets all selected, and I then seleced
And then chooses a new options without first selected.

I'm not sure if I understood you correctly, but, it looks like the option is selected, it just doesn't look selected?
Here's a CodePen with three examples: http://codepen.io/anon/pen/mWWWaO
The first one is an example of what you have, the option is selected by adding the selected attribute in the code. It is selected, and when you select other options, it stays, but it is not highlighted like the other ones.
The second example is just an example of what it is like with nothing selected, this was more for my own reference and testing.
The third one is a menu with no options set as selected, but instead, after the plugin is initialized it triggers a click event on the option you want selected.
A quick look at the plugin and it didn't look like there was a way to initialize it with options already selected and it also looks like there is no way to select an option programmatically through the plugin.
The plugin replaces the original menu with it's own code in order to create the menu and it looks like an option can't look selected unless it is clicked on, as opposed to the actual, hidden, menu being updated within the code.
I included the plugin JS in the CodePen, but not here. You can scroll to the bottom there to see the example JS code. You would probably want to set up a better way to mark those items as selected than the quick example I set up, but that's the general idea.
$('select').dropdown({
multi: true
});
// Select the third dropdown list and then find the second li in that list
$('.dropdown-list').eq(2).find('li').eq(1).trigger('click');

Use select2 instead. Its an awesome jQuery plugin both for longlist single value selects & multiple selects.

Accessibility for dropdown component

I am implementing accessibility for dropdown component, the special feature of my dropdown is it populates values in options menu only while opening dropdown,meaning it on the fly compiles the template and attaches to the dropdown box.
Dropdown HTML:
<div id="dropdown" ng-click="openDropdown()">
<div id="selectedValue" role="listbox" tabindex="0" aria-label="{{selectedVal}}" aria-owns="dropDownMenu">{{selectedVal}}</div>
</div>
DropDown Menu template(which gets compiled and polpulated after clicking dropdown above) :
<div id="dropDownMenu">
<li ng-click="selectItem()" role="option">item1</li>
<li ng-click="selectItem()" role="option">item2</li>
</div>
I am facing two problems
As my #dropdownMenu gets generated on click of #dropdown(dynamic template generation) jaws do not have access to #dropdownMenu when focus comes to #selectedValue so it doesn't announce the number of options etc as in case of a typical selectbox.
I am giving aria-label="{{selectedVal}}" for #selectedValue so on click of arrow keys javascript takes care of updating selectedVal even though #dropdownMenu is not open ,but changed value of selectedVal is not announced by jaws 16.0 ,it only announces it only first time as user tabs into it .Noted that this works fine in jaws 14.0 .
Looking forward for some solutions....

Adding aria-live=polite should fix this.
Is there a reason you're not using a standard select box and populating the option elements with your dynamic content? That would remove the need to update an aria property with the current option, as screenreaders will find it themselves. Also aria-label should be the name of the selectbox (or its purpose) not its selected option. If you were using a HTML select with options you could then remove the tabindex and aria-live as well, since native form inputs have full keyboard and screenreader support by default.

You should probably wait until the element is rendered and appeared in the DOM and only then set the focus to the first submenu item by using a native function .focus(). That will do the job.
But... Make sure that if the request takes too long and the user has already left somewhere else doing something else on the page, that in this case you don't steal his focus to get him back to the dropdown menu otherwise he might be annoyed.
Also instead of tabindex=0 for interactive elements (wherever you use ng-click) I would recommend that you use the actual native elements such as <a> or <button>. That way you ensure that the elements will be focusable both by keyboard but also visually, and react to ALL keyboard keys which the users are used to use and thus expect it to react such as SPACE or ENTER without needing you to implement it manually.

Show/hide div for selected options

I have three dropdown select boxes. Each contains a different set of demographic attributes. I'd like to display a score corresponding to whatever combination of selections is made by a user. For example, if a user selects Male, 18-24, Asian-American, I want to hide the current div and display the div corresponding to that combination.
I have seen answers for how to do this with just one select box, but since I have three and there are significantly more combinations, I wanted to see if there was a simple way to do this efficiently. I can provide specific code if needed, though a general example of how to do this would be just fine as well - thanks!

Keeping hidden divs for all possible combinations is not a good idea. That will make your page size bigger. Why don't you get only the relevant information as needed using ajax and show it ?
In your page, keep only one div to show the information
<select id="Age">
<option value='1'>18-24</option>
<option value='2'>25-50</option>
</select>
<select id="Place">
<option value='1'>Asia</option>
<option value='2'>America</option>
</select>
<div id="info"></div>
Now listen to the change event of the dropdowns, get the selected value of dropdowns and make an an ajax call to the server page and get the markup to show to user. In the below script, I am using jquery load method to load the new markup in the info div.
$(function(){
$("#Age,#Place").change(function(e){
var age=$("#Age").val();
var place=$("#Place").val();
$("#info").load("yourServerPage.php?age="+age+"&place="+place);
});
});
Assuming you have a server page called yourServerPage.php which accepts the age and place from the querystring and return the markup for the information div.

Adding <options> to a <select> element dynamically just before the user opens it

All,
I'm working on a web app. One of the key screens contains a fairly large table - typically between 50-100 rows.
On each row, I've got two <select> elements; each contains anywhere from 10-30 <option> elements.
If I were to include all <option> elements on each <select> on each row, I could end up with more than 6,000 elements (100 rows x 2 selects x 30 options).
So, my plan was to limit each select to a single option (the selected option). Then, when the user clicked the select, I would use JavaScript/jQuery to populate the options.
Then, after the user closes the select, I'd remove all but the selected option.
Importantly, I'm triggering the JavaScript function that adds the options on the focus event.
In Chrome and Firefox - this works great.
I've set up a jsFiddle to demonstrate: http://jsfiddle.net/j2zfD/
However, in IE - it doesn't work properly. Initially, when you click the select - instead of showing the menu - it simply focuses inside the select. If you click the select AGAIN, it then shows the menu. I'm guessing that's because IE tries to display the menu BEFORE firing the focus event.
Bottom line - this is unacceptable because you need to click the select twice to display the menu of options.
It also doesn't work properly sometimes in Safari on iOS. (Perhaps because there's a race condition between building the menu and firing the focus event...)
I've experimented with moving my logic to the mousedown event, but that seems to cause more problems, because mousedown is fired not only when you click into the select, but also when you click any of the options.
I'm guessing that this approach (adding options to a select when you need them) has been implemented successfully thousands of times; I just need a little advice on how to do it properly.
Thanks in advance!

Try this one:
HTML
<select class="sel">
<option value="a">Option A</option>
</select>
jQuery
jQuery(document).ready(function($){
var option={
"a":"option a",
"b":"option b",
"c":"option c"
};
$('.sel').on('click',function(){
$('.sel').html('');
$.each(option,function(i,n){
$('.sel').append('<option value='+i+'>'+n+'</option>');
});
});
$('.sel').on('change',function(){
var selected_val=$(this).val();
var selected_option=$("option:selected",this).text();
$('.sel').html('');
$('.sel').append('<option value='+selected_val+'>'+selected_option+'</option>');
});
});
here is the demo :http://jsfiddle.net/mHGQs/

Linked drop down lists and load div

I'm kind of new when it comes to programming but am trying to learn.
What I need to do for my site is have 2 or 3 linked drop-down menus so when I select an item from the first one, the second one will refresh with other options. I have found a way to do this using Java but I cannot seem to make it with the refresh div part.
I looked up prototypejs/updater but it is a bit over my head and cannot seem to link it with the JavaScript I used for the drop-down menus...
So if anyone can tell how I can link two, maybe 3 drop-down menus and after if I click an option from the last menu make a div from the page refresh with other content please help :)

Try a search on google for dynamic select boxes, it's plenty of examples, choose the less complicated one that best fits with your knowledge.
The principle is to link a function to "onchange" event that the select box fires when an item is selected.
Assuming this select box:
<select id="select1" name="option">
</select>
the javascript fragment is:
var sel1 = document.getElementById("select1");
sel1.onchange = function() {
//do whatever you want
};
For the first and the second select, the function will load other select's options, while in the third case it will show your div

Not 100% sure what you are after - but I think this should get you at least some of the way:
http://remysharp.com/2007/09/18/auto-populate-multiple-select-boxes/
It's a jQuery plugin for linking select boxes together, using Ajax to load the data to populate the next box in the chain based on the value selected in the previous.
You'll then still need to link the last box with the div - but you should be able to do it with a similar method yourself - see the jQuery Ajax documentation.
http://docs.jquery.com/Ajax