Change option value to selected if same url - javascript

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:

Related

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

Using a drop-down multiple times

Is it possible to write a <select> menu and use it in multiple places on web page?
example:
<select id="dm">
<option value="">Select Quantity</option>
<option value="less ">50 - 60</option>
<option value="medium ">61 - 70</option>
<option value="large ">71 - 80</option>
<option value="xl ">Above 80</option>
</select>
How can I use this menu multiple times within the same webpage?
Give the <select> a class and then you can use the jQuery clone() function.
<select class="dropClass" id="dm">
<option value="">Select Quantity</option>
<option value="less ">50 - 60</option>
<option value="medium ">61 - 70</option>
<option value="large ">71 - 80</option>
<option value="xl ">Above 80</option>
</select>
<div id="someDiv"><!-- you want the dropdown here too --></div>
$( ".dropClass" ).clone().appendTo( "#someDiv" );
DEMO
Keep the original in a dummy script block as a template (text/template is not recognized so is ignored).
<script id="dm" type="text/template">
<select>
<option value="">Select Quantity</option>
<option value="less ">50 - 60</option>
<option value="medium ">61 - 70</option>
<option value="large ">71 - 80</option>
<option value="xl ">Above 80</option>
</select>
</script>
Create copies using:
var copy = $('#dm').html();
something.append(copy);
This avoids the unique id issue (as the select has no id). It is also very easy to read/maintain.
As suggested below, if you want to use this in a form, the select must be named:
var $copy = $($('#dm').html()).attr('name', newMenuName);
something.append(copy);
note: The extra $() converts the string to a DOM element first before adding the attribute.
Using a templating engine such as Handlebar or similar would be easy, but might be over kill in your case.
I would simply store the complete HTML code in a variable, and then inject that variable wherever I need it for future use. Problem here is complexity and maintainability of the HTML code. In any case something like this (using jQuery):
JS:
var myDropDown = 'youthtmlcode is here'
$("#myDropDown").html(myDropDown);
HTML:
<div id="myDropDown"></div>

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);
}
});​

Saving selected option onChange - HTML / Javascript

I haven't done this in quite a few years and forgot. Had to look up the onchange and cookie use too..
Anyways, I want the cookie to save the selected value during the onChange. I know there are better ways to do this i.e. with POST, but I cannot alter the rest of the page and code.
<table style="background-color: #FFDD18;" width="100%" class="yearSelect"><tr>
<td><b>Select Year: </b>
<select name="yearEffSelect" id="yearEffSelect"
onchange="setCookie('YearEffSelected',__WHAT_GOES_HERE?__,1)">
<option value='2001'>2001</option>
<option value='2002'>2002</option>
<option value='2003'>2003</option>
<option value='2004'>2004</option>
<option value='2005'>2005</option>
<option value='2006'>2006</option>
<option value='2007'>2007</option>
<option value='2008'>2008</option>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011' selected>2011</option>
</select>
</td>
</tr></table>
So, question: What code goes in "__WHAT_GOES_HERE?__" ?
Something along the lines of document.getId('yearEffSelected').getValue() ?
You can use
this.value
to get the selected value.
This is assuming you have a function named setCookie that already exists.

select box manipulation

I would like to dynamically change the option value of a select tag. Is this possible? When I say value, I mean the "Change Me" portion. If this is possible, can someone please show me how?
<option value="0">Change Me</option>
You can fetch and modify the combobox item's text as follows:
$("#MyCombo option:selected").text()
Note: #shaz; thanks for your comment, my mistake!
Yes it is possible
You will need to look at the options available using a select tag.
<select id='selection'>
<option value='0'>Value 0</option>
<option value='1'>Value 1</option>
<option value='2'>Value 2</option>
<option value='3'>Value 3</option>
<option value='4'>Value 4</option>
<option value='5'>Value 5</option>
</select>
the javascript
var select = document.getElementById('selection');
// to get the currently selected item, use the `selectedIndex` property.
var index = select.selectedIndex; // 3 in case of value 2 selected
// to change its text
select.options[index].innerHTML = 'the new value';
is this what u are looking for?

Categories

Resources