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
Related
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 select field with the id being node_service_area_city. I wish to clear this dropdown using jquery. For the same I have the following code:
$("#node_service_area_city").empty();
When this line is commented I can chose any of the options in the dropdown. When the code is run with this line included then the options in the dropdown are STILL THERE but I cannot chose any of them. Nothing happens if I click on any of the options.
As such I feel that the dropdown menu is empty but somehow the dropdown items are still showing so I might have to refresh the page. Someone please guide me as to why this is happening and what can I do about it.
can you try this :
$('button').click(function () {
$("#node_service_area_city > option:first-child").prop("selected","true")
});
This question already has an answer here:
Reset values from jQuery Mobile
(1 answer)
Closed 8 years ago.
I've been trying all day to figure this out, and it seems simple enough, but how can I clear (not remove) all the selections from a group of select option drop downs at once? I want them set back to their default state when the div was first loaded. I can't use .reset because there will be other information in the form that I need to gather, but I need to allow users to change their minds without penalty (having to fill the form out all over again).
This SO question shows you how to remove the options which isn't what I need.
This SO question seemed to give the answer, but I haven't been able to get it to work.
And this jQuery bug entry seems to imply that it can be done with .empty(), but that doesn't work either.
This SO question lists a bunch of different ways to do exactly what I want, and I've tried all of them (see code below), none worked. I'm obviously missing something.
Here's a JSfiddle with the problem.
How to view the problem in the fiddle:
At Repair Status, click on Repaired; two new inputs are shown, a set of radio buttons and then select-option drop downs for each. Under Category, choose Part Quality, then choose any item from the drop down. That choice should now show up in the drop down. Now click on any one of the other Categories, and then back to Part Quality. The same choice you just made will still be shown instead of the default of "Select Part Quality Reason", which is what I want.
My attempts have focused largely on the Part Quality radio button for proof of concept, but the production code needs to clear all of the entries from all of the option-selects in the form except the Reporting Department drop down. Preferably I can use a generic selection with a $(this) construct, but that's not required. Something like this:
$("select option:selected").each(function () {
$(this).val(''); //doesn't work
});
Requirements:
When the user chooses a different radio button (Category), all of the option select drop downs will be reset to their default states. That way when the user makes their final choice & hits Submit, there are no extraneous entries. When they change their choice of Category, the underlying code must preserve the Reporting Department drop down choice.
I can then gather all the bits and pieces of their choices to be placed into a JSON string for an AJAX call to my code-behind and insert the data into a MySQL database.
I don't care if the answer uses jQuery or just plain JavaScript, I can use either happily.
Here's a bunch of attempts that haven't solved it yet:
$("#formEvent_repair input[type='radio']").on('change', function () {
//$("#select_part_quality_repair option:selected").attr("selected", false);
//$("#select_part_quality_repair").find('[selected]').removeAttr("selected");
//$('#select_part_quality_repair').attr('selectedIndex', '-1');
//$('#select_part_quality_repair').val(null);
$("#select_part_quality_repair").find('option:first').attr('selected','selected');
//$("select option:selected").val([]);
//$("select option:selected").html('');
//$("select_part_quality_repair").html('');
$("select_part_quality_repair").append().html('');
$("select option:selected").each(function () {
console.log("Emptying select options");
$("#select_part_quality_repair").find('option:first').attr('selected','selected');
//#select_part_quality_repair-button > span
//$("#select_part_quality_repair").prop('selectedIndex', -1);
//$("#select_part_quality_repair").find('option').attr("selected", false);
//$("#select_part_quality_repair option").attr("selected", false);
$("#select_part_quality_repair option:selected").attr("selected", false);
console.log(this);
$(this).val([]);
});
Because you are using jquery mobile you need to issue a refresh command to the elemnt that you change.
$('#select_part_quality_repair').val('').selectmenu('refresh');
This will deselect any option and then refresh the layout to show the change..
For radio buttons you set in code use
$(<radio-button-selector>).checkboxradio("refresh");
You clear a dropdown selection like this:
$("#select_part_quality_repair").val("");
That will clear the selection without removing the members.
Also, this line in your code is improperly formed:
$("select_part_quality_repair").append().html('');
You forgot to put the "#" before the element ID, as is required by JQuery. That line won't help you anyway, so you should not even bother with it.
Cheers,
-=Cameron
Unchecked all radio button
$(".clear").click(function(){
$('input:radio').each(function () {
$(this).removeAttr("checked");
});
});
EDIT 2 :
Unselected all options
$(".clear").click(function(){
$('select').each(function () {
$(this).removeAttr("selected");
});
});
Really hope someone can help with this.
I am building a site and need to be able to have people display a price based on their preferred option.
To see what I mean, please look at this link where it is done perfectly: https://swiftype.com/pricing
...when people select monthly or yearly, the displayed price in the chart beneath changes dynamically and instantly (without page reload).
This is what I need (except with three option to choose, not one). I suspect it is jquery with dynamic divs, but I cannot make it happen.
If anyone can help, I would be so so grateful.
Best wishes, and thanks for your time. AB.
// make the billing period selected tabs work
$(function() {
var $pricingTable = $('#pricing-table');
$('#billing-picker .tab').click(function() {
var $selectedTab = $(this);
var selectedPeriod = $selectedTab.data('period-length');
$('.tab').removeClass('selected');
$selectedTab.addClass('selected');
$pricingTable.removeClass().addClass(selectedPeriod);
})
});
This is the SCRIPT which does the selection of button ..
The link that you provide, is using a monthly or yearly class to hide and show the divs that already contains the prices, without any Ajax call. Try to inspect the elements with firebug or other console and you will see by yourself how is working.
You can either have an empty div which, on button click loads ajax content dynamically. If it's always going to be the same content, than I would suggest just have three divs and simply hiding the ones that are not being shown.
Have a look into the Jquery 'hide' method.
Hope that helps
I'm working with jQuery and a plugin called jQuery.SelectBox
I have 3 selectboxes, selecting an option in the first selectbox will change the options in the second one.
My problem comes when I try to insert values in the second selectbox via append function in jQuery. Everything works fine but the new options are not clickable.
You can see the problem right here: http://incubadora.gelattina.com/impac/galeria.html (scroll down and to the right), there are the three selectboxes.
From what I understand, you put in a normal select, and this does a dynamic creation of a stylized 'select box' via jQuery.
The problem, I would guess, is that, since you're adding items after the select box's initialization, the new items don't have any sort of action listeners on them.
I can't seem to find any documentation on this SelectBox plugin, but you need to find a way to Bind the click and hover actions provided by SelectBox onto you're newly added items.
You can try calling the .selectbox(); function on the select elements after you've added the new options to see if that works.
Hey I wrote a select box plugin called Selectzor, just for this reason.
It should accomplish everything you need.