Member Avatar for Xessa

I want to create a listbox in a jsp page. I want people to be able to choose multiple options...

Also i want if one option is selected, people should not select another option.


EXAMPLE
If b is selected people can select a and c.
But if a is selected people can't select b and c...

  • 2 Contributors
  • 2 Replies
  • 125 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for Xessa

I use select multiple but it is so tiny in HTML page.

Member Avatar for essential

You can try this demo:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#ccs21" media="all"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style id="css21" type="text/css" media="all">
/* <![CDATA[ */

div#main {
  clear : both;
  letter-spacing : 1px;
  margin : 0 auto;
  width : auto;
  vertical-align : baseline; }

select {
  display : block;
  margin : 0 auto;
  width : 98%; }

caption {
  color : #778899;
  margin-bottom : 1%;
  text-align : left; }

table {
   border : none;
  border-collapse : collapse; }
th {
  background-color : #fff;
  vertical-align : middle;
  border-top : 1px solid #ddd;
  border-bottom : 1px solid #ddd;
  border-right : 1px solid #ddd;
  font-weight : normal;
  width : 30%; }

td {
  border : 1px solid #ddd;
  background-color : #fff; 
  width : auto;
  padding : 1% 0 1% 0; }

div.tube {
  background-color : #FFF;
  color : #888;
  padding : 2%; } 
/* ]]> */
</style>
<script type="text/javascript" src="./MyAjax.js"></script>
<script id="script15" type="text/javascript">
// <![CDATA[ 
var disable = function( sel ) {
   sel = (( document.getElementById ) ? document.getElementById( sel ) : document.all[ sel ] );
   index = sel.selectedIndex;
   sel.options[ index ].disabled = true;

};

// ]]>
</script>
</head>
<body>
<div id="main">
<div class="tube">
<form id="testform" action="#" onsubmit="return false;">
<table width="100%"  id="testtable" frame="void" rules="none" summary="Disabling list options.">
<caption>Product Line:</caption>
<tr>
<th><label for="cats">Performance Upgrade</label></th>
<td><select id="cats" name="cats" size="4" multiple="multiple" onchange="disable( 'cats' );">
<optgroup label=" - Product Brands - ">
<option value="./hks.txt">HKS High-Performance Parts</option>
<option value="greddy">GREDDY Intercooler Kits</option>
<option value="brembo">Brembo Braking System</option>
</optgroup>
</select>
</td>
</tr>
</table>
</form>
</div>
</div> 
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.