• 0

Change link href on dropdown select option using jquery


Question

I need some help. I am trying to change a link attribute href on dropdown select. Link changes depending on the value of the option the user has selected.

I have used this page to help start me off: http://api.jquery.com/val/

I have adapted it to how I need it to work for me but something is missing and I don't know what it is to get it to work.

This is what I have written so far.

jQuery(document).ready(function($){
	function changeLang(){
		var link = $('#changelang').val();
		if(link == ''){ // if the option value is empty, hide link.
			$('#changelink').css('display', 'none');
		}
		else{
			$('#changelink').css('display', 'block'); // Display link after dropdown.
			$('#changelink').attr('href', 'readtext.php?lang=' + link); // Change the link
			alert('Language changed!'); // Alert user the language of the text has changed.
		}
	}
	$('#changelang').change(changeLang); // Loads the function again on change.
	changeLang(); // Loads function on page load.
});

This is my html code.

<select id="changelang">
<option value="" selected="selected">-------</option>
<option value="en">English</option>
<option value="fr">French</option>
<option value="es">Spanish</option>
<option value="jp">Japanese</option>
</select>
<a id="changelink" href="readtext.php">Read</a>

If a user selects a different language then the link will change. What I do with that link afterwards is up to me.

I would like some help to get it working and any would be most appreciated.

Thank you!

4 answers to this question

Recommended Posts

  • 0

I think you could also use plain old Javascript for that line using

document.getElementById("changelink").href = 'readtext.php?lang=' + link

instead of

$('#changelink').attr('href', 'readtext.php?lang=' + link''); // Change the link

Though the original code seems OK...

Also, why do you have ' ' after link?

  • 0

You don't even need JavaScript to do this, just use good old HTML forms!

<form action="readtext.php" method="get">
    <select id="lang" name="lang">
        <option value="" selected="selected">- Language -</option>
        <option value="en">English</option>
        <option value="fr">French</option>
        <option value="es">Spanish</option>
        <option value="jp">Japanese</option>
    </select>
    <input type="submit" value="Read Text" />
</form>

Then you can build upon that, for example by using CSS to style the submit button or by using JavaScript/jQuery to handle the submit event through AJAX. However what truly matters is that this will work in any browser, with or without JavaScript.

  • 0
  On 19/07/2010 at 08:56, Calculator said:

You don't even need JavaScript to do this, just use good old HTML forms!

<form action="readtext.php" method="get">
    <select id="lang" name="lang">
        <option value="" selected="selected">- Language -</option>
        <option value="en">English</option>
        <option value="fr">French</option>
        <option value="es">Spanish</option>
        <option value="jp">Japanese</option>
    </select>
    <input type="submit" value="Read Text" />
</form>

Then you can build upon that, for example by using CSS to style the submit button or by using JavaScript/jQuery to handle the submit event through AJAX. However what truly matters is that this will work in any browser, with or without JavaScript.

I don't want just good old HTML forms. I know how I want my code to react, I just need my jquery function to work for what I need it to do.

If a user selects a different language then the link will change. The user will then be able to click on the link and what ever function i do with that after is up to me. Don't change the function to basic form submission. That's not what I asked for.

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Google Chrome 137.0.7151.120 (offline installer) by Razvan Serea The web browser is arguably the most important piece of software on your computer. You spend much of your time online inside a browser: when you search, chat, email, shop, bank, read the news, and watch videos online, you often do all this using a browser. Google Chrome is a browser that combines a minimal design with sophisticated technology to make the web faster, safer, and easier. Use one box for everything--type in the address bar and get suggestions for both search and Web pages. Thumbnails of your top sites let you access your favorite pages instantly with lightning speed from any new tab. Desktop shortcuts allow you to launch your favorite Web apps straight from your desktop. Chrome has many useful features built in, including automatic full-page translation and access to thousands of apps, extensions, and themes from the Chrome Web Store. Google Chrome is one of the best solutions for Internet browsing giving you high level of security, speed and great features. Important to know! The offline installer links do not include the automatic update feature. Google Chrome 137.0.7151.120 changelog: [$7000][420697404] High CVE-2025-6191: Integer overflow in V8. Reported by Shaheen Fazim on 2025-05-27 [$4000][421471016] High CVE-2025-6192: Use after free in Profiler. Reported by Chaoyuan Peng (@ret2happy) on 2025-05-31 [425443272] Various fixes from internal audits, fuzzing and other initiatives Download web installer: Google Chrome Web 32-bit | Google Chrome 64-bit | Freeware Download: Google Chrome Offline Installer 64-bit | 128.0 MB Download: Google Chrome Offline Installer 32-bit | 115.0 MB Download page: Google Chrome Portable Download: Google Chrome MSI Installers for Windows (automatic update) View: Chrome Website | Release Notes Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • -Drop the art style, it's cool but doesn't fit the franchise at all. -Make it a gritty single player game, like Halo -Include deathmatch and all that stuff, extraction can be a separate mode If they don't do that, it's dead on arrival IMO.
    • It's a shame because it's one of the best immersive sims ever made, even though it could have used a bit more monster variety IMO.
    • He said "for some projects". There's no way that 30% of Windows' code is written by AI.
  • Recent Achievements

    • Week One Done
      topantidetectbrowser earned a badge
      Week One Done
    • Explorer
      Jdoe25 went up a rank
      Explorer
    • First Post
      Ian_ earned a badge
      First Post
    • Explorer
      JaviAl went up a rank
      Explorer
    • Reacting Well
      Cole Multipass earned a badge
      Reacting Well
  • Popular Contributors

    1. 1
      +primortal
      671
    2. 2
      ATLien_0
      281
    3. 3
      Michael Scrip
      223
    4. 4
      +FloatingFatMan
      190
    5. 5
      Steven P.
      146
  • Tell a friend

    Love Neowin? Tell a friend!