Load options into select box when opened - javascript

I have a web page with many select boxes, which should each contain the same set of options. The idea is that the user is given a list of items and has to select the matching option for each from another list.
Since the lists are both several hundred items long, loading all the options into each selection box is slow. Also, most of the items are automatically matched to an option to begin with, and the user only needs to skim through and make sure they are correct, so most of the select boxes will never be opened.
What I ideally want is a method of populating the options for each select box only when it is opened. This would mean I could populate the options for the few items which are not matched automatically using onload and only populate the rest as they are needed.
Is it possible to add options to the select boxes as they are opened?

You can try and start with empty selects add the options using the onfocus event and if the select has 0 options add them.
Here is a example

Related

selectize keep seeing all available options when setting value with php

We are using selectize to load some options from some provider php classes, and it works perfectly when creating a new item.
When editing an existing one, we use php to set the value and the text of the element, and then when loading the form, one has to delete the text from the input to be able to see the other options. Is there anyway to see that the value is selected, but when clicking all options show up? The same way as in the creation, you select an option, it is selected, you click on the select, you view all options...

Is there a way to preload selected options on multiple chosen.js select boxes?

I have 10 forms with 5 chosen.js select boxes in each form group. When the page loads I want to load the chosen select boxes with options which have set on another select box, which is hidden from view.
The idea is that the user can deselect the options they don't want, and update the form.
There's a challenge in assigning the correct options to the correct chosen select but what I'm trying to do now is get the already selected options to show.
An example of what it would look like is near the top of the Chosen page. It appears when the page loads 'Sloth Bear' and 'Polar Bear' are already pre-populating their select box.
I've tried chosen:update but my understanding is that it only updates the possible options you can select, not what I'm wanting. I've also tried manually inserting a DOM node into the chosen input, but that wasn't working either.
So is what I'm trying possible? Or is it just an example on the website?

Multiple Checkbox Lists, item can only be selected in one list

I have a selection of categories. I will have one or many textareas on a page. Each textarea can be assigned to one or more of each category. Each category can only be assigned to one textarea.
This is purely conceptual as this point, no code written yet. I'm thinking each textarea would have a jQuery checkbox list. The page starts out with a single textarea and it's related checkbox list. All items in the list are selected. User chooses to add another textarea (with a checkbox list). All items in the second checkbox list are disabled, as they are already assigned to textarea 1. As I uncheck items in the first list, they become enabled in the second list and can be checked.
Thoughts? Good or bad UI? How hard would this be to code?

Drop down box in form with a button to add a second copy of drop down box

I have a simple form that lists user names and for each user, the form displays a drop down box with a list of items that can be assigned to the user. Since it is often necessary to assign multiple items to a user, I need to display a button next to the drop down that says "add another item" which automatically inserts another an identical drop down box below the first one and preserves the selected option in the original drop down box.
You might be thinking - why not just display a series of radio buttons or checkboxes? Can't do that for two reasons, 1) the list of items is too long and 2) there are times when I need to assign the same item to a user twice.
I know this "add another item" button can be done in Javascript, I just don't know the code.
Here's an example of what I need to do (not working because there is no onClick function yet).
http://www.dropthechalk.org/sampleform.html
This has nothing to do with dynamically populating the items in the drop down box, so I've found it hard to search for solutions. Any help or links to resources much appreciated!
Here is a tutorial that I did a while ago on dynamically adding input elements via JavaScript. This should be a good starting point.

JavaScript, DHTML, jQuery: How to implement 'two way' master detail relationship within 3 html drop-downs (select boxes)

We have a requirement that has had me skimming the web for quite sometime now. Here is the problem scenario. We have a web-page and the page here contains three drop-downs as shown in the picture below (Dummy fields - but the actual business data is also on the same lines)
Here, we have three drop downs with the data being populated dynamically based on the selections in the other two. Let me give you an example. Whenever a person clicks on a drop-down button - the values for the drop-down should be dynamically generated using the values selected in the other two drop-downs. See the below scenarios:
If someone has a pre selected "Honda" in the first drop-down and he clicks on the 'Milage" drop down - the 'Milage' drop-down should:
a. clear previous options (if any)
b. populate the options dynamically for all the milages valid for 'Honda' (as per the DB)
c. show the drop-down with the new options.
Also, the flow should work irrespective of any order of the drop-downs being selected.
This is where I am having issues - if I write the 'OnClick' handler for the drop down and use an AJAX call to get the values - the drop down values are populated but on IE - the drop-down collapses again. Also, in Firefox the options are populated ok - but the drop-down is kind of too animated (understandably so as I delete all the options and add the new ones).
Also, it would be great if the whole filteration thing can be handled on teh browser (as the AJAX calls take some time)
Here is the image if you can't see it in the original post above -
http://www.imagechicken.com/uploads/1241831231099054800.jpg
Regards,
- Ashish
Your problem is that you are updating the drop down content when the user clicks on it. It is better to update the drop down when the related drop down is changed. For example:
$('#drop1').change(function(){
$('#drop2').load(url, {option: $('#drop1').val()})
})
A polling solution or an onchange solution as described by #Nadia is likely your best bet here.

Categories

Resources