Tiered selection of location - javascript

First of all, what I am trying to do is allow the user to narrow down their location using a database of countries, counties, towns and cities.
It's too much to show them every city in one go so I want them to narrow down their filter.
Ebay does this with their categories:
I was going to implement it something like this:
http://jsfiddle.net/z8qbn6zw/3/
<select>
<option selected disabled>Choose country</option>
<option value="volvo">England</option>
<option value="saab">Wales</option>
<option value="mercedes">Ireland</option>
<option value="audi">Scotland</option>
</select>
<select class="hidden">
<option selected disabled>Choose State</option>
<option value="volvo">Avon</option>
<option value="volvo">London</option>
<option value="saab">Kent</option>
</select>
<select class="hidden">
<option selected disabled>Choose City</option>
<option value="volvo">Town A</option>
<option value="saab">Town B</option>
<option value="mercedes">Town C</option>
<option value="audi">Town D</option>
</select>
I'm a bit stuck because this is going to be part of a larger form, and sometimes the user will not have javascript enabled.
Question 1: What HTML markup is the best way to approach this, should I be using selects, or instead have each item as a submit button with that location value.
Question 2: How should I approach the fact that the user may not have javascript enabled and that this will be part of a much larger form.
Any input and advice from someone who has attempted this before would be appreciated.

If you need this to work without javascript, you can do it like this:
<input type="radio" name="rgroup" id="sel1">Selection 1</input>
...
<div id="cont1" class="container">
<input type="radio">Something 1</input>
...
</div>
CSS:
.container {
display: none;
}
#sel1:checked ~ #cont1 {
display: block;
}
...
Fiddle
If you use <select> and <option>, you can't do this because the <option>s cannot select the <div>s which would have to be outside the <select>.

Related

Create a dynamic submenu in dropdown

I have reasons for rescheduling job and also sub-reason under a reason. I want that on selecting the reason, its sub-reason should appear. How do I do that?
<select>
<option value="" disabled="disable" selected="selected">
Select Reason
</option>
<option ng-repeat="reasons in Resonse_schedule ">
{{reasons.reasons}}
</option>
</select>
Use ng-options
AngularJS provides a directive ng-options to dynamically list down the options
<select ng-options="reason.reason as reason.reason for reason in Resonse_schedule">
<option value="" selected disabled >Select Reason</option>
</select>
I would suggest you to go through the documentation of ngOptions to understand it better
You can use this:
<select ng-model="reasonVar" ng-options="reason as reason.name for reason in Resonse_schedule">
<option value="" disabled="disable" selected="selected">Select Reason
</option>
</select>
<select ng-model="reasonSelected">
<option ng-repeat="subReason in reasonVar.subReasons" value="subReason.name">
{{subReason.name}}
</option>
</select>
Where reasonVar is the selected value from the Resonse_schedule list.
Here's a working example for this code:
http://jsfiddle.net/U3pVM/35122/
And here's more complicated one:
http://jsfiddle.net/miparnisari/u50hgn5a/

dropdown options change based on another dropdowns choices

I have a form that has several dropdowns. I need to make the second dependent on the value of the first. I have a Codepen that shows four dropdowns. The first does not change but the selects 2, 3, and 4 show the intended options I want.
Here is a listing of what option of dropdown 1 leads to the second.
new -> input-2
client -> input-3
admin -> input-4
I am doing this in OpenCart in a MVC so I am a little confused if this all is done in the view file or do I need to have some of this done in the controller, and if so how? I do believe JavaScript would be able to help here but not really sure how to implement that. My code pen is:
https://codepen.io/anon_guy/pen/pdbYad
<form action="/action_page.php">
<select name="Input-1">
<option value="*"></option>
<option value="new">new</option>
<option value="client">client</option>
<option value="admin">admin</option>
</select>
<select name="Input-2">
<option value="sign-up">Sign Up</option>
</select>
<select name="Input-3">
<option value="upgrade">upgrade</option>
<option value="stats">stats</option>
</select>
<select name="Input-4">
<option value="view-accounts">view all</option>
<option value="add">add</option>
<option value="remove">remove</option>
</select>
<input type="submit">
</form>

Select an option from a drop down using the class?

I am looking for a way to select an option from a drop down list using the item class, and containing text. For example
<select class="mySelect">
<option value="Test 1">Test 1</option>
<option value="Test 2">Test 2</option>
<option value="Test 3">Test 3</option>
</select>
I cannot use the select ID because it might change, but the class will always be the same. I want to do, if option has the word Test, make the color of the word "Test" blue.
I think I can handle the color assignment, but what I am having an issue with is using the class to select the child options. I have tried:
$('.mySelect option:contains("Test")');
However I get an error that this is not a valid selector.
I also tried:
$('.mySelect select option:contains("Test")');
Finally, thanks to comments, I tried
$('select option[value*="Test"]')
However, this only returns the first item.
OK, here is the actual code in production, lets see if this changes anything.
<select onclick="SetChoiceOption('ctl00_ctl40_g_6a07f243_6d33_4cb8_bf98_47743415ee4a_ctl00_ctl05_ctl05_ctl00_ctl00_ctl05_ctl00_DropDownButton')" name="ctl00$ctl40$g_6a07f243_6d33_4cb8_bf98_47743415ee4a$ctl00$ctl05$ctl05$ctl00$ctl00$ctl05$ctl00$DropDownChoice" id="ctl00_ctl40_g_6a07f243_6d33_4cb8_bf98_47743415ee4a_ctl00_ctl05_ctl05_ctl00_ctl00_ctl05_ctl00_DropDownChoice" title="Category: Choice Drop Down" class="ms-RadioText">
<option selected="selected" value=""></option>
<option value="Meeting Test">Meeting Test</option>
<option value="Work hours Test">Work hours Test</option>
<option value="Business Test">Business Test</option>
<option value="Holiday Test">Holiday Test</option>
<option value="Get-together Test">Get-together Test</option>
<option value="Gifts Test">Gifts Test</option>
<option value="Birthday Test">Birthday Test</option>
<option value="Anniversary Test">Anniversary Test</option>
</select>
Here is a fiddle that returns each as text, but, somehow does not return the elements.
https://jsfiddle.net/3hgpw778/
$('.mySelect option:contains("Test")'); is valid and is selecting the three options. but as an alternative you can try this:
$('select option[value^="Test"]')
$$('select option[value*="Test"]');
was the answer. I got the additional piece from Simple jQuery selector only selects first element in Chrome..?

Is there any way of making a <select> go to url

I have this code below:
<select name='m-menu' onchange='location = this.options[this.selectedIndex].value;'>
<option selected value='/users/lol'>My Account</option>
<option value='/?signout'>Sign Out</option>
<option value='/photos'>Photos</option>
<option value='/post'>Share/Post</option>
<option value='/feed'>Feed</option>
<option value='/chat'>Create Chat</option>
</select>
However I want it to go to the account if the user clicks on "My Account". Can this be done without adding an other option the the select tag, If so please help???
I will need this to be used for mobile browsers and I need this to go to the url if and when the user selects an option
You can achieve that by changing the selected value when the user focuses on the select onfocus="this.selectedIndex = -1".
<select name='m-menu' onfocus="this.selectedIndex = 0" onchange='location = this.options[this.selectedIndex].value;'>
<option value="" style="display: none">Select an Item</option>
<option selected value='/users/lol'>My Account</option>
<option value='/?signout'>Sign Out</option>
<option value='/photos'>Photos</option>
<option value='/post'>Share/Post</option>
<option value='/feed'>Feed</option>
<option value='/chat'>Create Chat</option>
</select>
I would also suggest you add your event listeners from a separate javascript file instead of using the on* attributes.
You can do that using addEventListener

Changing Custom Menu in JQuery Mobile

I'm working with JQuery mobile. I am building a form that includes the following code:
<label for="genderDropDownList">Gender</label>
<select name="genderDropDownList" id="genderDropDownList" data-native-menu="false">
<option>Unspecified</option>
<option value="-1">Unspecified</option>
<option value="0">Male</option>
<option value="1">Female</option>
</select>
A custom menu is shown here. Right now, when someone clicks the drop down, a dialog appears with multiple options. The dialog title says "Unspecified". I know it says this because "Unspecified" is the first option. What I want is, the drop down to default to "Unspecified" and the dialog title to say "Please choose...".
I can't seem to figure out how to do this? I don't see any properties that you can set to accomplish this. Then I thought about listening for the "tap" event, but I couldn't seem to get that to work either.
Try This:
<label for="genderDropDownList">Gender</label>
<select name="genderDropDownList" id="genderDropDownList" data-native-menu="false">
<option>Please choose...</option>
<option value="-1" selected="selected">Unspecified</option>
<option value="0">Male</option>
<option value="1">Female</option>
</select>
Does something like this work?
<label for="genderDropDownList">Gender</label>
<select name="genderDropDownList" id="genderDropDownList" data-native-menu="false">
<option>Please Choose</option>
<option value="-1" selected="selected">Unspecified</option>
<option value="0">Male</option>
<option value="1">Female</option>
</select>

Categories

Resources