multiple dropdowns using the same jquery function - javascript

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.

Related

VBA IE engaging 'list' and selecting 'onchange' 'option values'

I'm currently working on automation process which involves VBA and IE. Everything goes well up to date with multiple actions that my code is undertaking. The issue is when I approach a part where I have 2 dropdown lists, with second one appearing after certain selection is made in the first one.
The part of the code I have developed [which is rather crude] for this section is as follows:
Dim dropY As Object
Set dropY = IE.Document.getelementbyid("selectedListType")
dropY.Focus
Application.SendKeys "{DOWN 4}"
Do While IE.Busy
Application.Wait DateAdd("s", 2, Now)
Loop
Do Until .ReadyState = 4
DoEvents
Loop
'second list
Dim dropZ As Object
Set dropZ = IE.Document.getelementbyid("dataSet")
dropZ.Focus 'I can see that the window is being selected
Application.SendKeys ("{DOWN 1}") 'at this point the code fails
Application.SendKeys ("{ENTER}")
The Question is, how to approach the selection in both dropdown lists in order to avoid future errors? Below is the website source.
'first list
Select List Type
<select name="selectedListType" id="selectedListType" class="regular" onchange="onSubmitOrgConfig(2)">
<option value="Choice1"
>
Country Lists
</option>
<option value="Choice2"
>
Region Lists
</option>
<option value="Choice3"
>
Area Lists
</option>
<option value="Choice4"
>
Aggregated Lists
</option>
<option value="OTHER"
selected>
Other Lists
</option>
<option value="Other1"
>
Secure List
</option>
</select>
Select List
<select name="dataSet" id="dataSet" class="regular" onchange="onSubmitDataSet(6, this.value);">
<option value="">--Select--</option>
<option value="LIST_1"
>
BLACKLIST_LIST
</option>
<option value="LIST_2"
>
BLUE_LIST
</option>
<option value="LIST_3"
selected>
RED_LIST
</option>
<option value="LIST_4"
>
YELL_LIST
</option>
<option value="LIST_5"
>
PURP_LIST
</option>
<option value="LIST_6"
>
BL_LIST
</option>
<option value="LIST_7"
>
ORA_LIST
</option>
<option value="LIST_8"
>
NOCOL_LIST
</option>
<option value="LIST_999"
>
LIST_999
</option>
</select>
tl;dr;
Without a webpage to play with it is a little hard to advise on ordering of events and if everything below will work but hopefully it will help.
For example, I don't know if you have to do the Click on first list, select an item, then the javascript attached is automatically fired, or if you need to actually fire the event. Then if you have to repeat this for the second. So below, I have shown you how I would go about trying to achieve each of these actions individually so you can play with them to see what works. We can refine with feedback.
selectedListType dropdown:
You can try to click the first list with
.document.querySelector("#selectedListType").Click
You can select items from the first list with
.document.querySelector("#selectedListType [value='Choice1']")
Change Choice1 as appropriate
So marked as selected could be
.document.querySelector("#selectedListType [value='Choice1']").Selected = True
dataSet dropdown:
You can try to click the second list with
.document.querySelector("#dataSet").Click
You can select items from the second list with
.document.querySelector("#dataSet option[value='LIST_1']")
Change LIST_1 as appropriate
So marked as selected could be
.document.querySelector("#dataSet option[value='LIST_1']").Selected = True
onchange event:
Both lists have an onchange event:
You can trigger these with
.document.querySelector("#selectedListType").FireEvent "onchange"
.document.querySelector("#dataSet").FireEvent "onchange"

Flask: Multiple dropdown selections

<select class="form-control" id="rating" name="rating">
<option value="5">5</option>
<option value="4">4</option>
<option value="3" selected>3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
I have a dropdown menu that I'm using to make a form using Flask.
Is there anyway to allow the user to keep selecting dropdown options?
Meaning to say, each time the user chooses an option another dropdown menu is rendered below and the previous one will display an [x] to delete that selection.
So, if the user wants to select multiple options they can do so, and I can have the flask app output these selections as a list

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.

How to make DropDownList items grouped by category

I have a DropDownList whose values i want to group by category.
What are the best practices and maybe some code samples that show proper submission of form in ASP.NET MVC 3 that contains options under different categories/groups.
Sample
In the example above, i want the category to be collapsible and not display a radio button. Also when clicked, the category should expand to display the available radio button options under that category that allow selection of only one option. I'm not interested in tracking the value of the category, what i want to get when the form is submitted is the value of the selected option under a parent category.
Has any one done some thing similar or related in MVC 3 & jQuery?
You can do something like that using the in HTML.
<select>
<optgroup label="Parent 1">
<option value="1">sub category 1</option>
<option value="2">sub category 2</option>
</optgroup>
<optgroup label="Parent 2">
<option value="3">sub category 1</option>
<option value="4">sub category 2</option>
</optgroup>
</select>
Replace the data with your modal data.

classic asp - dropdown to select all dropdowns with the same value as the first dropdown

I have a primary drop down list that has three values:
1 - select
2 - Fail
3 - pass
the page is populated from the database, so here you could have anything from 1 to 50 dropdown to set the status of each record as fail or pass.
I would like to select 'fail' from the primary dropdown, any dropdown's that are populated from database should set to the selection i have made as being 'fail'
hope someone can help.
thank you
Yas
You can do this using javascript or jquery.
OnChange of first dropdown, select all dropdown values accordingly.
EDIT:
For your reference, I have prepared an example. Refer LIVE DEMO
HTML:
<select class="dDown">
<option value="select">select</option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
</select>
<select>
<option value="select">select</option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
</select>
<select>
<option value="select">select</option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
</select>
​
JS:
$('.dDown').on("change", function() {
$('select').not('.dDown').val(this.value);
});​

Categories