SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Dec 2008
    Location
    Italy
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post dynamic hyperlinks creation

    Hi everybody,

    please can you help me with this problem?

    I have a list of elements within a option select. In what way I can make a script that generate a list of hyperlinks a href (ul or simply hrefs with <br>), but these links will be generated based on the value selected on the first option select. Different option select selected value produces different list of hrefs (if possible within a div). And all without submit the form. I am new in JS and I am not able to do this. Can you give me any suggestions?

    many thanks.

  2. #2
    SitePoint Mentor NightStalker-DNS's Avatar
    Join Date
    Jul 2004
    Location
    Cape Town, South Africa
    Posts
    2,880
    Mentioned
    48 Post(s)
    Tagged
    0 Thread(s)
    If you are new to javascript, i would suggest you get into jquery. jquery.com. It is a lightweight javascript library that makes life a lot easier for you. This will be easily done using jquery

    $("select#ddlElements").change(function() {
    var customHtml = '';
    if ($(this).val() == 'el1')
    {
    customHtml='asdas sdfsdg';
    }
    $("div#links").html(customHtml);
    });

    the above targets a select with id="ddlElements" and when the select is changed puts ur custom html into a div with id="links".

    I hope this helps.

    PS. Merry Christmas

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I suggest that the links are not generated by the script for several reasons. Search engines won't be able to find them, people without javascript will be unable to see them, page content should not be stored and generated by scripting, and you have more flexibility for designing the layout in html.

    Here's the html:

    Code html4strict:
    <div id="groupLinks1" title="First group of links">
    	<ul>
    		<li><a href="link1.html">Link 1</a></li>
    		<li><a href="link2.html">Link 2</a></li>
    		<li><a href="link3.html">Link 3</a></li>
    	</ul>
    </div>
    <div id="groupLinks2" title="Second group of links">
    	<ul>
    		<li><a href="link4.html">Link 4</a></li>
    		<li><a href="link5.html">Link 5</a></li>
    		<li><a href="link6.html">Link 6</a></li>
    	</ul>
    </div>
    <div id="groupLinks3" title="Third group of links">
    	<ul>
    		<li><a href="link7.html">Link 7</a></li>
    		<li><a href="link8.html">Link 8</a></li>
    		<li><a href="link9.html">Link 9</a></li>
    	</ul>
    </div>

    The script searches for the group of links, and creates a select field at the top of the group of links.
    The text for the option is obtained from the title field of the group. If you do not want the title field to appear when you hover on or near the links, just uncomment the line in the script that's currently commented out.

    Note: This script is designed to run from the end of the body. If you want to put it in the head you are going against best practices and will need to find some way to delay the running of the script until the page has loaded.

    Code javascript:
    var select = document.createElement('select');
    var index = 1;
    var group = document.getElementById('groupLinks' + index);
    select.appendChild(newOption('Please select a group'));
    if (group) {
    	group.parentNode.insertBefore(select, group);
    }
    while (group) {
    	select.appendChild(newOption(group.title, group.id));
    	//group.title = '';
    	group.style.display = 'none';
    	index += 1;
    	group = document.getElementById('groupLinks' + index);
    }
    select.onchange = updateLinks;
    function updateLinks() {
    	var select = this;
    	var group;
    	var i;
    	for (i = 0; i < select.options.length; i += 1) {
    		group = document.getElementById(select.options[i].value);
    		if (group) {
    		    if (select.options.selectedIndex === i) {
    				group.style.display = '';
    			} else {
    				group.style.display = 'none';
    			}
    		}
    	}
    }
    function newOption(text, value) {
    	var option = document.createElement('option');
    	if (text) {
    		option.appendChild(document.createTextNode(text));
    	}
    	if (value) {
    		option.value = value;
    	}
    	return option;
    }

    For testing purposes, here is the complete test page.

    Code html4strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Test</title>
    </head>
    <body>
    <div id="groupLinks1" title="First group of links">
    	<ul>
    		<li><a href="link1.html">Link 1</a></li>
    		<li><a href="link2.html">Link 2</a></li>
    		<li><a href="link3.html">Link 3</a></li>
    	</ul>
    </div>
    <div id="groupLinks2" title="Second group of links">
    	<ul>
    		<li><a href="link4.html">Link 4</a></li>
    		<li><a href="link5.html">Link 5</a></li>
    		<li><a href="link6.html">Link 6</a></li>
    	</ul>
    </div>
    <div id="groupLinks3" title="Third group of links">
    	<ul>
    		<li><a href="link7.html">Link 7</a></li>
    		<li><a href="link8.html">Link 8</a></li>
    		<li><a href="link9.html">Link 9</a></li>
    	</ul>
    </div>
    <script>
    var select = document.createElement('select');
    var index = 1;
    var group = document.getElementById('groupLinks' + index);
    select.appendChild(newOption('Please select a group'));
    if (group) {
    	group.parentNode.insertBefore(select, group);
    }
    while (group) {
    	select.appendChild(newOption(group.title, group.id));
    	//group.title = '';
    	group.style.display = 'none';
    	index += 1;
    	group = document.getElementById('groupLinks' + index);
    }
    select.onchange = updateLinks;
    function updateLinks() {
    	var select = this;
    	var group;
    	var i;
    	for (i = 0; i < select.options.length; i += 1) {
    		group = document.getElementById(select.options[i].value);
    		if (group) {
    		    if (select.options.selectedIndex === i) {
    				group.style.display = '';
    			} else {
    				group.style.display = 'none';
    			}
    		}
    	}
    }
    function newOption(text, value) {
    	var option = document.createElement('option');
    	if (text) {
    		option.appendChild(document.createTextNode(text));
    	}
    	if (value) {
    		option.value = value;
    	}
    	return option;
    }
    </script>
    </body>
    </html>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •