Develop Reference

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>

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

Change option value to selected if same url

Good morning,
I have a form
<select name="select" onchange="window.open(this.options[this.selectedIndex].value,'_self')">
<option selected="selected">Select your size</option>
<option value="https://www.webpage.com/01">Size S</option>
<option value="https://www.webpage.com/02">Size M</option>
<option value="https://www.webpage.com/03">Size L</option>
<option value="https://www.webpage.com/04">Size XL</option>
</select>
So if people select size S they go to https://www.webpage.html/01 and so on.....
On al the pages i have the same select form, but how can i change the chosen option as selected="selected" using javascript?
So if people select size M, the go to https://www.webpage.com/02 and that the form is displaying size M on this page. So if option value url is the same as the page url it automaticly give the select="selected" to this option.
maybe a dump question, but javascript isnt my best part ;)
Thanks for all your help.

You can try
$("option[value='" + window.location.href.toString() + "']").closest("select").val(window.location.href.toString());
It will find the option exactly matching with page url

If url exactly corresponds option values
$("selectElementId").val(window.location);

You can achieve this using javascript or jQuery
HTML
<select name="select" id='option' onchange="window.open(this.options[this.selectedIndex].value,'_self')">
<option selected="selected">Select your size</option>
<option value="https://www.webpage.com/01">Size S</option>
<option value="https://www.webpage.com/02">Size M</option>
<option value="https://www.webpage.com/03">Size L</option>
<option value="https://www.webpage.com/04">Size XL</option>
</select>
jQuery solution
$(document).ready(function(){
$('#option').on('change',function(){
$("#option option:selected").attr('selected','selected');
});
});

If you want to do this with JavaScript only, I would recommend you to do this:
add an id attribute to each of the option tags
<option id="sizeS" value="https://www.webpage.com/01">Size S</option>
<option id="sizeM" value="https://www.webpage.com/02">Size M</option>
add a name attribute to the body-tag of each page:
For example, on the page https:.../01:
<body name="S">
add this function to the JavaScript part of each page:
function updateForm() {
var currentSize = document.getElementsByTagName['body'][0].getAttribute('name');
document.getElementById("size" + currentSize).selected = "selected";
}
execute the function updateForm() when loading the page. For example, with onload:
<body name="M" onload="updateForm()">
you can also use an event listener with the "DOMContentLoaded" event, click here for more information:

Tiered selection of location

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>.

Selected only one values

i have:
<select id="number" name="number">
<option value=""></option>
<option value="1">01</option>
<option value="2" selected="selected">02</option>
<option value="3">03</option>
<option value="4" selected="selected">04</option>
<option value="5">05</option>
</select>
and next with jQuery i use for example:
$('#number').val(1);
but this add next value - 1 and now i have:
<select id="number" name="number">
<option value=""></option>
<option value="1" selected="selected">01</option>
<option value="2" selected="selected">02</option>
<option value="3">03</option>
<option value="4" selected="selected">04</option>
<option value="5">05</option>
</select>
what i must use with:
$('#number').val(1);
that all others value can be not selected? So i would like - if i set new val then all others values can be reset. Maybe use each for reset, but how?
I know - this should be multiselect = false, but this is not my code - i must use this this jQuery.

Are you using a multiple select? Because the HTML you've added indicates that you're not. If you're not working with a multiple select, then your HTML with several selected="selected" doesn't make any sense.
If you are working with a multiple select, then setting .val() should clear the other selections. (Demo). If in some weird browser it isn't, you could try manually resetting the select:
$('#number option').prop('selected', false).val(1);
If clearing the current selection is not what you want, then you should consider setting the selected property manually, rather than using .val()
$('#number option[value=1]').prop('selected', true);
Demo