Javascript Use a previous drop down box to justify the next one - javascript

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
});

Related

Set selection dropdown value in Javascript

I'm trying to set a value for a selection dropdown using javascript. Please see the pictures below. When I manually change the value of the dropdown list (by clicking), the timeline changes in accordance to the new value.
selection dropdown
timeline
When I do the following with javascript:
myDropdown.selectedIndex = 4;
The value is changed in the dropdown, but it doesn't update on the timeline. Is there any way to trigger this update?
I solved it by going through a huge javascript file.
What eventually worked was to call the dropdown change function with: $(".timeslotdrop").change();

VBA selecting option in HTML drop down list

I am pretty new to web-scraping and have limited html/js knowledge. I am trying to select a value in a drop down box. My code manages to loop over the options in the drop down list and recognizes the one I want, I just can't seem to select it.
code:
`For Each opt In ieDoc.getElementById("dealerCodeList").Options
If opt.innerText = 9265 Then
opt.Focus
opt.Selected = True
opt.setAttribute("selected") = "selected"
Exit For
End If
Next`
The website I am using requires login access so I have attached screenshots. You can see it's the drop down list in the top left hand corner that I am trying to select a value for. Thanks in advance!
Website screenshot:

dependent cascading drop down box list in AngularJS or jquery?

I am trying to implement dependent cascading drop down list in AngularJS. It is coming fine for: If I select any Country(say: Country1), then it's states(say: State1, State2, State3) are displaying in second drop down box(it's fine).
But my requirement is that: after displaying the above relevant states for a country, I need to display only that respective selected country for the given states in the first drop down box(say if I select either State1 or State2 or State3 of Country1 then Country1 should be displayed in the first drop down box(since Country1 is having those states), and other countries(Country2, Country3) should be disabled or disappeared or not visible in the first drop down box). Created Fiddle. Please help me that how can I implement it eihter in jquery or angularjs ? Thanks in advance.
if I write ng-diabled="cities" in the first drop down box, then it is working fine as per my requirement.

add new option to select drop down list using jsp

can anyone please suggest , how to add new option to drop down list (using select tag in html) so that user can enter the new value and on submit it should be appended to the existing list ..i am able to populate it's option list via DB dynamically and it's working properly
i am having 5 drop down mutually exclusive category lists in a single table row and i am providing them some initial options.Now i want that if the list contains user's required option then user can select from existing one ...else it should be able to add a new entry to that list & it should be simultaneously updated in DB on submit.
Follow this steps
As you are populating the drop down from databse . So its better to add the value in database only.
I think your user will be entering the value in a text box. So on submit call a method or servlet which can be used to add the value in the database field from which you are populating the drop down.
After updation make your servlet to return on the same page.
Now you can see your new option in the drop down.
Update on further problem explaination
For your problem do one thing
Give a text box in last option of each dropdown.
Select an event in which after the new value entered by user in that text box an java script function can be triggered line onmouseout.
In that function call get the text value .
Now call your servlet or method or whatever you are using to update the db with value value in the column corresponding to that drop down using Ajax or normally.
Refresh the page.
hiii,
finally it's done.
i used following function as-
function abc()
{
var myoption = document.createElement("option"); //works with both mozilla and IE
myoption.text ="mytext";
myoption.id="mytext";
myoption.name="mytext";
myoption.value ="mytext"; //Probably, the sID stuff
document.getElementById("drop_1").options.add(myoption);
}
& so on within loop.
thanks to all .

Linked drop down lists and load div

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

Categories

Resources