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>

Make an option of jQuery ComboBox not selectable

just like the title says...I have a combobox, whose options are filled with web service call, activated on the click event.
I need to handle that list and make an option of that list (just the one whose value starts with "-" not selectable).
The "-" works a separator between one option group and the second following one.
So let's say I have this combo:
<select id="authority" class="selectauthority" style="width: 300px;" onclick="DisableSpecificOption()" name="authority">
<option value=""> </option>
<option value="001">Federal Bureau </option>
<option value="003">Police </option>
<option value="-1">-</option>
<option value="004">Army </option>
<option value="018">Navy </option>
<option value="018">CIA </option>
<option value="018">NSA </option>
</select>
As far as I know make the option disabled should be enough...I tried several scripts but I wasn't able to obtain my goal.
My Fiddle
Thank you in advance
edit
Since I have to use it in more than one selector and function I wrote a general one.
Updated Fiddle
Hope it helps somebody

Try
$('#authority option[value="-1"]').attr("disabled","disabled")
or
$('#name option:contains("-")').attr("disabled","disabled")

Javascript Jump (show/hide)

Don't have any programming experience and only basic html/css.
I'm trying to create a javascript menu (open to suggestions if there is a easier way?) that will show/hide based on the option selected in the first menu?
I have the following ...
<form name="jump">
<select name="menu" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="#" selected>Quick Links</option>
<option value="menu1">menu1</option>
<option value="menu2">menu2</option>
<option value="menu3">menu3</option>
</select>
<select name="menu1" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="http://www.site.com/opt1-1.html">opt1</option>
<option value="http://www.site.com/opt1-2.html">opt2</option>
<option value="http://www.site.com/opt1-3.html">opt3</option>
</select>
<select name="menu2" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="http://www.site.com/opt2-1.html">opt1</option>
<option value="http://www.site.com/opt2-2.html">opt2</option>
<option value="http://www.site.com/opt2-3.html">opt3</option>
</select>
<select name="menu3" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="http://www.site.com/opt3-1.html">opt1</option>
<option value="http://www.site.com/opt3-2.html">opt2</option>
<option value="http://www.site.com/opt3-3.html">opt3</option>
</select>
</form>
Can someone explain how i can ....
-show/hide menus 1-2 based on which option is selected in 'menu'???
Thanks inadvance!

Consider using a ready-made dropdown menu as a solution. Some links:
38 jQuery And CSS Drop Down Multi Level Menu Solutions: http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
22 Best jQuery Dropdown Menus: http://slodive.com/web-development/best-jquery-dropdown-menus/
Alternatively, you could write your own solutions, say, with jQuery. For more information on this, see for example tutorial for a "Simple jQuery Dropdown Menu".

jquerymobile Add select menus dynamically

I have a set of dropboxes
code is
<fieldset data-role="controlgroup" data-type="horizontal">
<!--<legend> </legend>-->
<select name="select-widget" id="select-widget">
<option value="Widget">Widget</option>
</select>
<select name="select-nbl" id="select-nbl">
<option value="NBL">NBL</option>
<option value="HSM">HSM</option>
<option value="TERR">TERR</option>
<option value="KEY_ACCOUNT">KEY ACCOUNT</option>
</select>
<select name="select-level-focus" id="select-level-focus">
<option value="LEVEL">LEVEL</option>
<option value="FOCUS">FOCUS</option>
</select>
<select name="select-wdg" id="select-wdg">
<option value="WDG">WDG</option>
</select>
<select name="select-wds" id="select-wds">
<option value="WDS">WDS</option>
</select>
</fieldset>
No I want to remove exixsting selectbox or add new select box to it on change of "select-nbl" or "select-levelfocus"
How to do it using jquerymobile

This has little to do with jQuery mobile, that's merely a mobile framework. The event listeners and DOM manipulation you want to do here is still handled by jQuery.
Anyways, how do you do it?
Well, you have your event listeners:
$('#select-nbl').change(function() {
#Do something
});
And you can hide stuff:
$('#select-wdg').parents('.ui-select').hide();
The use of parents() is to take care of the extra styling jQuery mobile puts in there.
You can't easily add select boxes to jQuery mobile, but if they're hidden, you can show them.
$('#select-wdg').parents('.ui-select').show();
All this is action: http://jsfiddle.net/luhn/Vgc4g/9/

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>