CODEWITHSUNDEEP
javascriptforms
Patrick
Patrick

Reputation: 3

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.

Upvotes: 0

Views: 464

Answers (4)

Mike Clark
Mike Clark

Reputation: 1870

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

Upvotes: 1

divaidee
divaidee

Reputation: 1

If you want to do this with JavaScript only, I would recommend you to do this:

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

  2. add a name attribute to the body-tag of each page: For example, on the page https:.../01:

    <body name="S">

  3. 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";
}

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

Upvotes: 0

Tilak Patidar
Tilak Patidar

Reputation: 115

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

Upvotes: 0

opewix
opewix

Reputation: 5083

If url exactly corresponds option values

$("selectElementId").val(window.location);

Upvotes: 0

Related Questions