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>

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

Select Box Running Change Function With Size Attribute

I am working with select box. I use select box like as below:
<select name="cars" onchange="jsFunction()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<script>
function jsFunction(){
console.log($(.names).val());
}
<script>
The combo is look like as below:
THis function is working when the comboboz is chenged.But i want to show all option at the same time. But i don't want to use multiple option select. So that i used size option like as below:
<select name="cars" size="4" onchange="jsFunction()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
And then the select box look like as below:
And only only one option can selected. But my problem is not working function. When i use size attribute, and then the function is not triggered when selectbox is changed. When i remove this size, and then the function is triggered.
How can i show all option at the same time (without multiselect) without using size attribute ? Or how can i trigger this function with size attribute ?

Your JavaScript function shouldn't log anything at all, as it has a syntax error. $(.names) needs quotes around names. Also, it needs to reflect the class of your <select>.
First you need to add the class names to your select:
<select name="cars" size="4" class="names" onchange="jsFunction()">
And then add quotes around your jQuery DOM target:
console.log($('.names').val());
Here's the new code:
function jsFunction() {
console.log($('.names').val());
}
<select name="cars" size="4" class="names" onchange="jsFunction()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
I've created a fiddle showcasing this here.
Hope this helps!

onclick Event (select field) on mobile browser

i have a select field and use onclick event to call a JS function.
<select size="6" name="Network" id ="Network" style="width: 255px;" onclick="javascript: Ajax_Show_Info();" onselect="javascript: Ajax_Show_WiFiInfo();" />
<option value="1"> Option 1</option>
<option value="1"> Option 2</option>
<option value="1"> Option 3</option>
</select>
On PC everything works fine. On my mobile phone Ajax_Show_Info() is called when I select the next option. For example wehn I click option 1, nothing happens, when I click on option 2 the function Ajax_Show_Info() is called but for option 2 etc.
Is there an event which would work on mobile device? Onselect doens't also works.

Did you try onchange event? It will call the function each time the option value gets changed. Also notice that you have kept values for all options same.
<select size="6" name="Network" id ="Network" style="width: 255px;" onchange="Ajax_Show_Info();">
<option value="1"> Option 1</option>
<option value="2"> Option 2</option>
<option value="3"> Option 3</option>
</select>

Did you try to use other events?
For example: oninput?
Here is the complete events list for select object:
http://www.w3schools.com/tags/ref_eventattributes.asp

Problem with onMouseOut event with select box options (IE)

The problem I am facing with below code is that whenever I try to select any option from the select box, the mouseout event executed (in IE, Mozilla doing great) and option disappear. How can one get over this bug?
<select name="ed" id="ed" dir="ltr" style="width:200px;overflow:hidden;" onMouseOver="this.style.width='auto'" onMouseOut="this.style.width='200px';">
<option value="1" selected="selected">click here</option>
<option value="1">Samuel Jackson</option>
<option value="2">David Nalog</option>
<option value="3">This one is a real real big name</option>
</select>

I changed the code do it conditionally. Now it is working fine. Check it.
<select name="ed" id="ed" dir="ltr" style="width:200px;overflow:hidden;"
OnMouseOver="this.style.width='auto';" onmouseout="if(!this.focussed) {this.style.width='200px';}" onfocus="this.focussed=true;" onblur="this.style.width='200px';this.focussed=false;" >
<option value="1" selected="selected">click here</option>
<option value="1">Samuel Jackson</option>
<option value="2">David Nalog</option>
<option value="3">This one is a real real big name</option>
</select>