We Keep Coding

multiple dropdowns using the same jquery function

I have this other issue where I have multiple dropdowns which have the same jquery function. When I select the 1st project dropdown the the corresponding task dropdown gets selected. But when i have multiple dropdown only the first task drop down gets selected. when there are multiple dropdowns when the project is selected in the dropdown i want the corresponding task dropdown to be updated.
My Task dropdown look like this
<select id="task_id" name="tasks_id[]" size="8" multiple="1">
<optgroup label="01 CONSULT" >
<option value="1">1a Rules</option>
<option value="2">1b Vacation</option>
<option value="3" >1c Meetings</option>
</optgroup>
<optgroup label="02 SALES" >
<option value="12"> 2c Internal</option>
<option value="13"> 2d External </option>
</optgroup>
</select>
Html code
<%= select_tag "task_id[]", options_from_collection_for_select([unspecified_task], 'id', 'name', entry.task_id || unspecified_task.id) + grouped_options_for_select(active_task_options, entry.task_id.to_s) %>
I want to know how to write the jquery so that when their are multiple dropdowns and a project is selected the corresponding task drop down will be populated.

This could be because you have same id or name for multiple dropdowns.

prevent unix.multiselect auto sorting on selected items

I am using jquery.uix.multiselect by yanickrochon, API documentation here:
API Documentation
<select id="countries" class="multiselect" multiple="multiple" name="countries[]">
<option value="AFG">Afghanistan</option>
<option value="ALB">Albania</option>
<option value="DZA">Algeria</option>
<option value="AND">Andorra</option>
<option value="ARG">Argentina</option>
<option value="ARM">Armenia</option>
<option value="ABW">Aruba</option>
<option value="AUS">Australia</option>
<option value="AZE">Azerbaijan</option>
<option value="BGD">Bangladesh</option>
<option value="BLR">Belarus</option>
<option value="BEL">Belgium</option>
</select>
And JS:
$(".multiselect").multiselect(
{availableListPosition:'left', sortable: true }
);
When I select a country, it goes to the selected panel sorted, I enabled sortable so I can drag and sort manually. My question is: is there a way to append the newly selected country to the bottom of the selected list? instead of automatically sorted along with the selected list.
The one option I see sortMethod can disable the sorting, but would like the un-selected list to be sorted for easy find. Does anyone with experience with this?
In sort, I am looking to keep the un-selected list sorted while items in the selected list is appended to the bottom.

Swap options between select Harvest Chosen select boxes

I am trying to swap all the options between two Harvest Chosen select boxes. The scenario is I want to record details of a phone call. The call can either be inbound or outbound. If the call is outbound the I populate a select box (caller) with a list of possible values of those users that can make outbound calls and a second box (callee) with a list of possible values of those users they can make calls to. If the user updates the call type to be inbound then I want to swap the select boxes around so that the callee's are in the caller box and vice versa.
I very nearly have this working except each time I change the call type it keeps appending the values onto the end of the select options in each respective caller/callee select rather than completely clearing them and replacing all values.
Would appreciate some help as to why this is happening.
See http://jsfiddle.net/RyHFK
HTML
<label for="call_type">Call Type:</label>
<select name="call_type" id="call_type" class="chosen">
<option value="OUTGOING">Outgoing</option>
<option value="INCOMING">Incoming</option>
</select>
<label for="caller">Caller:</label>
<select name="caller" id="caller" class="caller chosen">
<option value="Caller 1">Caller 1</option>
<option value="Caller 2">Caller 2</option>
<option value="Caller 3">Caller 3</option>
<option value="OTHER">Other</option>
</select>
<label for="caller">Callee:</label>
<select name="callee" id="callee" class="callee chosen">
<option value="Callee 1">Callee 1</option>
<option value="Callee 2">Callee 2</option>
<option value="Callee 3">Callee 3</option>
<option value="OTHER">Other</option>
</select>

The way it's written, you are appending to the same arrays every time there is a change. Move your calleeOptions and callerOptions variables inside your change handler:
// on call type change
$('#call_type').change(function(){
var callerOptions = [];
var calleeOptions = [];
Here's a jsFiddle.

What's the easiest way to implement this multi-level drop-down list?

I want to implement the following system of drop down lists:
I'm aware that drop down lists are implemented using <select> statements. However, I'm not sure if I need to use Javascript commands to handle my requirements listed in the picture. How would you suggest to handle this?
Thanks in advance!

You will have all three drop down on the page but dropdown 2 and 3 will be hidden. On change of first drop down you will have to check the value of first drop down and show second and third dropdown. Demo is available here
In html we define three dropdowns first is visible and second and third are hidden. We will show the hidden dropdown when 3 is selected from first dropdown
<select id="sel1" >
<option > 1 </option>
<option > 2 </option>
<option > 3 </option>
</select>
<select id="sel2" style="display:none" >
<option > 1 </option>
<option > 2 </option>
<option > 3 </option>
</select>
<select id="sel3" style="display:none" >
<option > 1 </option>
<option > 2 </option>
<option > 3 </option>
</select>
​In javascript we have show the hidden dropdowns when 3 is selected from first drop down
$('#sel1').change(function ()
{
if($(this).val() == "3")
{
$('#sel2').show();
$('#sel3').show();
}
}
);
​

I think if you want to only allow the user to select second and third options based on the selection event in the first option, you are probably going to need JavaScript to do this. If you have to cater for users with JavaScript disabled you will have to have something like an Update button that posts to the server where server-side code in ASP.Net / PHP / Django / Node.js or something of that sort, builds the second and third options and returns them to the user.

You can put the second and third dropdowns inside divs and keep them hidden initially. Once the value of first is selected, make the second visible and so on. You can easily do this with javascript. For eg:
function onLoad() {
document.getElementById("dayDropDownDiv").style.visibility="hidden";
}
and create the select inside the div in the body as:
<div id="dayDropDownDiv">
<label for="select-Day" class="select">Day:</label>
<select name="select-day" id="dayDropDown" onchange="dayChange(this)"></select>
</div>
You can also create the dropdowns programmatically in javascript. You'll have to add the <option>s to the <select>'s innerHTML as:
function addValues() {
var dayOptionsList = "";
for(loopIndex=1;loopIndex<=31;loopIndex++){
dayOptionsList = dayOptionsList+"<option>"+loopIndex+"</option>";//<-this will create an options list for days
var daySelector = document.getElementById("dayDropDown");
daySelector.innerHTML = dayOptionsList;//done
}
Finally, make them visible when the first <select>'s particular option is selected:
function firstValueSelected( resultsObj){
var val = obj.options[obj.selectedIndex].text;//<- text of selected option
if(val=="f")
document.getElementById("dayDropDownDiv").style.visibility="visible";
}

Javascript: Onclick Set Dropdown Menu Checked Value

UPDATE: I was trying lots of different methods for doing this and none of them worked... until... I changed my dropdown menu name from (date-range) to (dateRange) removing the (-), sorry for wasting time!
I have a search form and a custom reset form button, which resets all the values in the form. I now have a dropdown menu and when the reset button is pressed, I want the first option to be selected.
This is my form:
<select name="date-range" id="date-range">
<option value="Any">Any date</option>
<option value="Today">Today</option>
<option value="Yesterday">Yesterday</option>
<option value="1 Week">Within 1 Week</option>
<option value="1 Month">Within 1 Month</option>
<option value="3 Months">Within 3 Months</option>
<option value="6 Months">Within 6 Months</option>
<option value="1 Year">Within 1 Year</option>
</script>
... and this is my javascript function that now needs to select the first dropdown value "Any".
function resetSearchForm()
{
document.searchFrm.searchStr.value='';
document.searchFrm.vertical.checked = true;
document.searchFrm.horizontal.checked = true;
** dropdown select first **
}
What is the proper way to do this? Any help gratefully received :)

This will work:
document.getElementById('date-range').selectedIndex = 0;
Example can be found here:
http://jsfiddle.net/yPmmG/3/

No javascript required, just add the selected attribute to the first option. That's what the attribute is for.
<option selected value="Any">Any date</option>
It is recommended that all select elements have one option with the selected attribute, that way there is always one selected by default. It will be the selected option when the page first loads and if the form is reset.