newbie javascript problem

[c_martini]

I have been asked to alter some navigation element links on a site that will steer users to relevant content depending on which country they select in a select menu. I would like to use javascript to do this but i'm not sure the way to go about it.

This is an example of markup I have to work with:

Code: Select all

    <select name="s_coco" class="dropdown">
        <option value="all" selected="selected">all countries</option>
        <option value="uk">uk</option>
        <option value="uk">us</option>
   </select>
            
    <ul>
        <li><a href="http://www.mysite.com/search/category1/all" title="">category1</a></li>
    </ul>

I would like to change the value on the end of the url in the link of the li. if the user selects 'uk' in the select menu, then the 'all' on the end of the link changes to uk without reloading the page. I only know very basic javascript and how to set variables.

I was thinking to use an onSelect event in each option tag to set/change the value of the variable that would be somehow called at the end of the link url in the li

Any ideas on how to do this?

[Rakuli]

Okay, this would be pretty simple I believe

if you add id="s_coco" to the select tag and id="links_list" to ul tag.

the at some point after the </ul>

add

Code: Select all

 
<script type="text/javscript">
 
var countryChooser = document.getElementById('s_coco');
var linksList = document.getElementById('links_list');
 
countryChooser.onchange = function () {
var country = this.options[this.selectedIndex].value;
 
var links = linksList.getElementsByTagName('a');
 
for (i = 0; i < links.length; i++) {
    links[i].href = links[i].href.substr(0, links[i].href.indexOf('/', (links[i].href.length - 4) + 1))) + country;
}
 
};
</script>

[c_martini]

Thanks for the help Rakuli,

It does not seem to be working for me though in that the end of the link does not change on the fly. Maybe i'm missing something:

Code: Select all

    <select name="s_coco" id="s_coco" class="dropdown">
        <option value="all" selected="selected">all countries</option>
        <option value="">---------------</option>
        <option value="uk">uk</option>
        <option value="uk">us</option>
   </select>
            
    <ul id="links_list">
        <li><a href="http://www.mysite.com/search/category1/all" title="">category1</a></li>
    </ul>
    
<script type="text/javscript">
 
var countryChooser = document.getElementById('s_coco');
var linksList = document.getElementById('links_list');
 
countryChooser.onchange = function () {
var country = this.options[this.selectedIndex].value;
 
var links = linksList.getElementsByTagName('a');
 
for (i = 0; i < links.length; i++) {
    links[i].href = links[i].href.substr(0, links[i].href.indexOf('/', (links[i].href.length - 4) + 1))) + country;
}
 
};
</script>

[Rakuli]

Sorry mate

I misspelt javascript ... lmao

Code: Select all

  <select name="s_coco" id="s_coco" class="dropdown">
        <option value="all" selected="selected">all countries</option>
        <option value="">---------------</option>
        <option value="uk">uk</option>
        <option value="uk">us</option>
   </select>
            
    <ul id="links_list">
        <li><a href="http://www.mysite.com/search/category1/all" title="">category1</a></li>
    </ul>
    
<script type="text/javascript">
 
var countryChooser = document.getElementById('s_coco');
var linksList = document.getElementById('links_list');
 
countryChooser.onchange = function () {
var country = this.options[this.selectedIndex].value;
 
var links = linksList.getElementsByTagName('a');
 
for (i = 0; i < links.length; i++) {
    links[i].href = links[i].href.substr(0, links[i].href.indexOf('/', (links[i].href.length - 4) )+ 1) + country;
}
 
};
</script>

[c_martini]

Originally Posted by Rakuli

Sorry mate

I misspelt javascript ... lmao

Ooh, I hadn't caught that... Now corrected but I still cannot get it to work...

[Rakuli]

That exact script above (directly above your post) works for me in FF and IE.

Are you adding anything else to it?

[c_martini]

Originally Posted by Rakuli

That exact script above (directly above your post) works for me in FF and IE.

Are you adding anything else to it?

Hmm , no go for me in any browser. I have not altered anything. So that script is supposed to change the 'all' on the end of the link url to 'uk' or 'us' on the fly when either of those are selected in the drop down?

So instead of:

href="http://www.mysite.com/search/category1/all"
the link would change to:
href="http://www.mysite.com/search/category1/uk"
or:
href="http://www.mysite.com/search/category1/us"

?

[c_martini]

Sorry, I repasted the amended code you corrected to my html and it works now..

Many thanks for your help!

[c_martini]

Actually I had another idea. I think for my purposes rather than the javascript counting the number of '/' and adding/appending the variable to the end of the link, would it be difficult to have it look for a string or something in the url and replacing it? The reason I ask is the url I gave in the example will most definately not always be the same length or path so this javascript just breaks the link if its not always the same length as the example...

[Rakuli]

What that script is actually doing is finding the very last '/' and removing what is after it replacing it with the country code. So if there will always be a /language it will always work.



Cheers

[c_martini]

Originally Posted by Rakuli

What that script is actually doing is finding the very last '/' and removing what is after it replacing it with the country code. So if there will always be a /language it will always work.

Cheers

Thats fine then. I can amend my links so they work with this script. Thanks for all your help!