I am trying to write a Javascript for a drop down menu on my JSP page. Basically, The drop down retrieves a bunch of options from a database query, and the options are sorted by a flag in the query (1 or 0). So the options at the top of the dropdown menu are all the options with 1, and below that are all the options with 0.
What I would like to do is only show the options flagged as 1 upon clicking on the dropdown, and then at the bottom of that list of options, have a "show hidden options" option that the user can click to show the rest of the options (the ones flagged as 0).
Does anyone have any ideas for how to achieve this?
Thank you
Related
The way datatables is handling selections is giving my a bit of a headache.
I have a 4-step wizard. In step 2 of the wizard some items can be selected using a multiselect.
Step 3 offers an option selection for the in step 2 selected items where 1 option per item can be selected using a checkbox. This step also contains a 'Select all' checkbox that can be used to select the option for all items shown in the datatable. This is not a datatables, but a simple button outside of the datatable that uses jQuery to set all the editable checkboxes.
Step 4 offers an overview of the selected items with their options.
Using this wizard in the following scenario and outcomes:
Select a couple of items in step 3 (for this example, use 3 selected items)
Use the 'Select all' button to select the option for each of the 3 items
See the confirmation in step 4 that the option is selected for each item
Go back to step 3 and use the 'Select all' button to deselect the option for each item
Now using the datatable filtering to only show item 2 in the datatable and select the option for this item
Go to step 4 and see that the option is selected for each of the 3 items (<- Unexpected behaviour)
Go back to step 3 and remove the filtering on the database (change nothing else)
Go to step 4 and see that only item 2 has the option selected.
It looks like the 'hidden' items in the datatable only get updated when visible to the user. This seems like odd behaviour to me. Is there a way to avoid or work around this type of behaviour?
FWIW: I didn't find the cause of this problem, but I know a working work-around. Maybe it's usefull for someone in the future:
Because the problem seems to exists in the visibility of the items when a filter is used in the datatable, I've tried to clear this filter and redraw the table before proceeding to the next step.
table.DataTable().search('').draw();
Doing this ensures all items are visible before they are being read from the datatable. This works as a work-around for this datatable problem.
I am trying to achieve bootstrap select drop-down with collapsible sub options.
for example : The select drop-down should display the OPTION as "Vehicle", "House" etc. where in the option Vehicle will have further sub options as "2-Wheeler" "3-wheeler" and "4-wheeler". These sub-options should be collapsible and only should show when the user clicks on the main option (i.e. Vehicle). And so the user will be able to select only from the sub-options.
Similarly, for the case of House - the collapsible sub options should allow user to select any of the options like "2-BHK","3-BHK","4-BHK".
I tried many ways, but couldn't achieve it exactly. Any suggestions would be highly appreciated !!
I am looking for a solution for my website. I have a form where a customer selects their device (eg iPhone 6s, Samsung GS6), but I would then like the data from that drop down box to transfer over to the next drop down box so they can select an available repair. If you need an example, go to my website (www.warerepair.uk/booking.html)
Looks like you want cascading drop-down then in that case you have to on first drop-down change event get first's drop-down selected value and using that value load second drop down.
Please see the below code
$('#firstDropdownID').on('change', function () {
var searchVal = ($(this).find('option:selected').val());
//Using this searchval load your second dropdown
});
I have a page in which the user needs to select a product based on drop down filtering. Consider four drop downs Category--> SubCategory-->Product---> Variant. Its not so user friendly when the user has to select value from each drop down to get the final variant. So I need to select all the values with a subnavigation within a single drop down. You can view what I mean in this link -- http://i.stack.imgur.com/YMoQX.gif
Please tell me how to do this.
I think you can split in three columns and using radio button group in each column to select category or product, filtering in each column
I am new to ext-js 4 and stuck on the following. I have a form with 6 radio buttons. Based on the button selected I want to display a grid right next to the form. How can this be done?
e.g: Radio buttons: All, time, priority.
If All is selected by users, it displays time and priority both information.
If time selected then only time information in the grid and so on.
Any pointers?
You can hide or show columns in your grid:
myGrid.getColumnModel().setHidden(0, true); // hide column 0 (0 = the first column).
If you are asking about two (or maybe more than 2) different grids, you can add them both with different properties "hidden' and then use:
gridPanel.hide() and gridPanel.show().
To display grid right next to the form you can use column layout.
http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html