SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru ripcurlksm's Avatar
    Join Date
    Aug 2004
    Location
    San Clemente, CA
    Posts
    859
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    multiple radio buttons = different drop down menus

    To save space for having multiple drop down menus on a page I want to consolidate these drop downs and force the user to select a radio option. Upon selecting the option, it would show a drop down menu beneath it. If they changed their mind and selected a different radio button, it would change the dropdown to the appropriate menu.

    For example:


    Search by:
    o color o type o size o date

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Here an example that seems to work fine.

    Code css:
    .tab_container {
    	border: 1px solid black;
    	width: 200px;
    }
    .tabs {
    	margin: 0;
    	padding: 0;
    }
    .tabs li {
    	padding: 0.2em;
    	list-style-type: none;
    	display: inline;
    }
    .hidden {
    	display: none;
    }

    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>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    <form>
    <p>
    	<label for="search">Search</label>
    	<input type="search">
    </p>
    <p id="searchType">
    	Search by:
    	<input type="radio" name="searchType" id="colorSearch">
    	<label for="colorSearch">color</label>
    	<input type="radio" name="searchType" id="typeSearch">
    	<label for="typeSearch">type</label>
    	<input type="radio" name="searchType" id="sizeSearch">
    	<label for="sizeSearch">size</label>
    	<input type="radio" name="searchType" id="dateSearch">
    	<label for="dateSearch">date</label>
    </p>
    <p>
    	<select id="colorList">
    		<option>Select color</option>
    		<option value="red">Red</option>
    		<option value="green">Green</option>
    		<option value="blue">Blue</option>
    		<option value="octirine">Octirine</option>
    	</select>
    	<select id="typeList">
    		<option>Select type</option>
    		<option value="animal">Animal</option>
    		<option value="mineral">Mineral</option>
    		<option value="vegetable">Vegetable</option>
    	</select>
    	<select id="sizeList">
    		<option>Select size</option>
    		<option value="large">Large</option>
    		<option value="medium">medium</option>
    		<option value="small">small</option>
    	</select>
    	<select id="dateList">
    		<option>Select date</option>
    		<option value="medjool">Medjool</option>
    		<option value="judean">Judean</option>
    		<option value="morocco">Morocco</option>
    		<option value="mretan">Cretan</option>
    	</select>
    </p>
    </form>
    <script src="script.js">
    </script>
    </body>
    </html>

    Code javascript:
    var el = document.getElementById('searchType');
    el.onchange = function () {
    	var els = this.getElementsByTagName('input'),
    		elsLen = els.length,
    		i,
    		id;
    	for (i = 0; i < elsLen; i += 1) {
    		el = els[i];
    		if (el.getAttribute('type') === 'radio') {
    			id = el.getAttribute('id');
    			id = id.split('Search')[0] + 'List';
    			if (el.checked) {
    				document.getElementById(id).style.display = '';
    			} else {
    				document.getElementById(id).style.display = 'none';
    			}
    		}
    	}
    };
    el.onchange();
    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
  •