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

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

Related

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>

Multiple Select in jquery 1.3.2 does not work in popup

If I have the multiselect directly on the page, it works and displays fine; but if I have the multiselect on the popup, the display is wrong and it only shows one element. Can someone tell me why and how to fix it?
I show my problem in this jsfiddle: http://jsfiddle.net/uvvm40Lu/4/ (click on the popup link).
And this is my code:
<select id="transactionType0" multiple="multiple" data-native-menu="false" size="7">
<option value="Mo">Mo</option>
<option value="Di">Di</option>
<option value="Mi">Mi</option>
<option value="Do">Do</option>
<option value="Fr">Fr</option>
<option value="Sa">Sa</option>
<option value="So">So</option>
</select>
popup
<div id="popup1" data-role="popup" data-overlay-theme="a">
<select id="transactionType1" multiple="multiple" data-native-menu="false" size="7">
<option value="Mo">Mo</option>
<option value="Di">Di</option>
<option value="Mi">Mi</option>
<option value="Do">Do</option>
<option value="Fr">Fr</option>
<option value="Sa">Sa</option>
<option value="So">So</option>
</select>
If you look at the popup documentation: http://api.jquerymobile.com/1.3/popup/, you will see that it does not support popup chaining (i.e. one popup open over another popup). Unfortunately the multi-select uses a popup to display the choices, so it violates the popup chaining issue.
There is a jQM plugin called simpledialog2 that does allow chaining: http://dev.jtsage.com/jQM-SimpleDialog/demos2/, or you can roll your own.

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

on option item is selected

EDIT:
I forgot http:// on the links. This is not my problem. I'll fix the question...
i have some options, like this:
<select class="mySelect">
<option value="http://www.url1.com">Url 1</option> <!--Default displayed--->
<option value="http://www.url2.com">Url 2</option>
<option value="http://www.url3.com">Url 3</option>
</select>
To this i have a jquery listener, looks like this:
$('.mySelect').change(function(){
window.location.replace($(this).val());
});
Since this just responds to a change made, i can't be redirected to "www.url1.com". What should i use? I only get suggestions for change on google.
EDIT 2: I've got a bunch of solutions on using a dummy as first option. I also got the other solution of using a button to read the selected option and then redirect, but that's not usable in the project i'm working on, even if these are really good solutions otherwise.
In this case, i want it to listen for usage, even if the change is made to itself, like i'm selecting the first option (that's selected by default) i want it to do something with it - In the case above a redirect. I'll leave it open if someone have a good solution to this problem.
Try putting in an empty valued first option:
<select class="mySelect">
<option value="">Please select...</option>
<option value="http://www.url1.com">Url 1</option>
<option value="http://www.url2.com">Url 2</option>
<option value="http://www.url3.com">Url 3</option>
</select>
You can then amend your jQuery to make sure there is a value before redirecting:
$('.mySelect').change(function(){
var value = $(this).val();
if (value != "") {
window.location.replace(value);
}
});
Example fiddle
Note also that http:// (or whichever protocol you're using) is required on the link values.
Updated
If you would prefer to not have the dummy option, you would need to change the logic to work on button click:
<select class="mySelect">
<option value="http://www.url1.com">Url 1</option>
<option value="http://www.url2.com">Url 2</option>
<option value="http://www.url3.com">Url 3</option>
</select>
<button id="redirect">Go</button>
$("#redirect").click(function() {
window.location.replace($(".mySelect").val());
});
You have to put http:// also
window.location.replace("http://"+$(this).val());
One option can be that you change the first option like
<select class="mySelect">
<option value="select">Select URL</option> <!--Default displayed--->
<option value="www.url1.com">Url 1</option>
<option value="www.url2.com">Url 2</option>
<option value="www.url3.com">Url 3</option>
</select>
or you can use click jquery event for combo box .
<form>
<select class="mySelect">
<option value="" selected="selected">Please Select</option>
<option value="www.url1.com">Url 1</option>
<option value="www.url2.com">Url 2</option>
<option value="www.url3.com">Url 3</option>
</select>
</form>​
$(".mySelect").change( function() {
var n = $(this).val();
if(n != "") {
window.location.assign("http://"+n);
}
});​

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>

Categories

Resources