www.webdeveloper.com
Results 1 to 3 of 3

Thread: How Do I Highlight A Dropdown Selection

  1. #1
    Join Date
    Mar 2014
    Posts
    47

    How Do I Highlight A Dropdown Selection

    Hi, is it possible to highlight an option in a dropdown box?

    Code:
    <td style="text-align:right;">Class:</td>
    	<td><select id="class" name="class" onchange="cl(this,cl11,cl12,cl13,cl14,cl15,cl16,cl21,cl22,cl23,cl24,cl25,cl26,clp)">
    		<option value="">Choose one</option>
    		<option value="0">0</option>
    				<option value="1">1</option>
    				<option value="3">3</option>
    		<option value="4">4</option>
    		<option value="5">5</option>
    	    <option value="6">6</option>
    			</select></td>
    I want to highlight the options 1 and 4, but how do I do this?

  2. #2
    Yes you can do this. Just add a style attribute to your option

    <option style = "background:yellow" value="4">4</option>

  3. #3
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    You can achieve this without any JavaScript, even if the <select> are created dynamically by assigning those particular <options> to a class. For example:

    HTML Code:
    <html>
    	<head>
    		<style>
    			.highlight
    			{
    				background-color: #AAAAAA;
    			}
    		</style>
    	</head>
    	<body>
    		<table>
    			<tbody>
    				<tr>
    				<td style="text-align:right;">Class:</td>
    				<td><select id="class" name="class" onchange="cl(this,cl11,cl12,cl13,cl14,cl15,cl16,cl21,cl22,cl23,cl24,cl25,cl26,clp)">
    					<option value="">Choose one</option>
    					<option value="0">0</option>
    					<option class = "highlight" value="1">1</option>
    					<option value="3">3</option>
    					<option class = "highlight" value="4">4</option>
    					<option value="5">5</option>
    					<option value="6">6</option>
    						</select></td>
    				</tr>
    			</tbody>
    		</table>
    	</body>
    </html>
    	

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles