|
HTML - Images In Select Tag
i m trying to put img with in select tag but its not displaying the right image
please look to a code n tell me the right way of doing it thank you see its working with rest of the color's like red pink etc not with the image which i want to get changed to my backgorund Code: <HTML>
<HEAD>
<TITLE></TITLE>
<script language="javascript">
function ChangeColor(color)
{
document.bgColor=color;
}
</script>
</HEAD>
<BODY>
<H3>color changer</H3>
<p>
<select name="bgchanger" onchange="ChangeColor(value)">
<option value="">select a color</option>
<option value="white">white</option>
<option value="gray">gray</option>
<option value="pink">pink</option>
<option value="magenta">magenta</option>
<option value="red">red</option>
<OPTION VALUE="a"><img src="F:\a.jpeg">a</option>
</select>
</p>
<p> </p>
</BODY>
</HTML>
i gave the right path but still nt showing please correct me Similar TutorialsIs there anyway to place images (along with text) in a select tag? Hey, just a quick question... How would i go about using an image as a select option in a form? i know its possible as ive seen it around on a few sites before, but im not sure how to do it myself. tried the obvious: <select name="stars"> <option value="1"><img src="MYIMAGE"></option> </select> but oviously that doesnt work. any help would be greatly appreciated. how to add images to the html select element. I mean in the options it should display images along with text. Thanks in advance Dear All, I find that I can do that in firefox, ie 9, but not ie 8 and ie 7. anyone knows the answer. HTML Code: <select id="resourceTypeTree" name="resourceTypeTree">
<script type="text/javascript">obj158= new Object;obj158.sid = 158;obj158.seq = 1;obj158.lv = 1;obj158.lvText = "首頁";obj158.upLvSid = 1;obj158.isShown = 1;obj158.isNetvigated = 1;obj158.url = "/cle/landingPage.php";obj158.remarks = "";obj158.lastUpdate = "2011-04-18 16:15:50";obj158.uiNextSeq = 0;obj158.nextSid = 160;</script>
<option value="158" onclick=selectClick('tree',obj158); >→首頁</option>
<script type="text/javascript">obj3= new Object;obj3.sid = 3;obj3.seq = 2;obj3.lv = 1;obj3.lvText = "語文學習基礎知識";obj3.upLvSid = 1;obj3.isShown = 1;obj3.isNetvigated = 0;obj3.url = "/cle/pages/webSiteReferenceList.php?sid=3&upLvSid=1";obj3.remarks = "";obj3.lastUpdate = "2011-04-18 16:28:05";obj3.uiNextSeq = 7;obj3.nextSid = 160;</script>
<option value="3" onclick=selectClick('tree',obj3); >→語文學習基礎知識</option>
<script type="text/javascript">obj10= new Object;obj10.sid = 10;obj10.seq = 1;obj10.lv = 2;obj10.lvText = "漢字形音義";obj10.upLvSid = 3;obj10.isShown = 1;obj10.isNetvigated = 0;obj10.url = "/cle/pages/webSiteReferenceList.php?sid=10&upLvSid=3";obj10.remarks = "";obj10.lastUpdate = "2011-03-16 13:46:44";obj10.uiNextSeq = 10;obj10.nextSid = 160;</script>
<option value="10" onclick=selectClick('tree',obj10); >→→漢字形音義</option>
<script type="text/javascript">obj38= new Object;obj38.sid = 38;obj38.seq = 1;obj38.lv = 3;obj38.lvText = "漢字的演變";obj38.upLvSid = 10;obj38.isShown = 1;obj38.isNetvigated = 1;obj38.url = "/cle/pages/webSiteReferenceList.php?sid=38&upLvSid=10";obj38.remarks = "";obj38.lastUpdate = "2011-03-16 14:25:54";obj38.uiNextSeq = 0;obj38.nextSid = 160;</script>
<option value="38" onclick=selectClick('tree',obj38); >→→→漢字的演變</option>
<script type="text/javascript">obj39= new Object;obj39.sid = 39;obj39.seq = 2;obj39.lv = 3;obj39.lvText = "字形的正體、俗體、異體";obj39.upLvSid = 10;obj39.isShown = 1;obj39.isNetvigated = 1;obj39.url = "/cle/pages/webSiteReferenceList.php?sid=39&upLvSid=10";obj39.remarks = "";obj39.lastUpdate = "2011-03-16 14:25:54";obj39.uiNextSeq = 0;obj39.nextSid = 160;</script>
<option value="39" onclick=selectClick('tree',obj39); >→→→字形的正體、俗體、異體</option>
</select>
Regards, Man Pak Hong, Dave manpakhong@hotmail.com Hi all, I'm trying to make a select choose the text that shows on the page (blue rectangle). Also, when i click the text, it's supposed to copy to some other part of the page. It works when i load the page, but when I change the item in the select, it stops working, and I'm not sure why. Any guesses? Thanks!!! the code is the following: Code:
<html lang="en-US">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
hide = false;
set_text();
$('#items').change(function(){
set_text();
});
//hide==true? $('#top_suggestions').hide(600): '';
$('.list').click(function(){
console.log('click');
text=$(this).html();
$(annotation).html(text);
});
$('.list').mouseover(function(){
$(this).css('cursor', 'hand');
$(this).css('color', 'red');
});
$('.list').mouseleave(function(){
$(this).css('cursor', 'auto');
$(this).css('color', 'black');
});
function set_text(){
text = "";
id = $('#items').get(0).value;
text = $('#'+id).html();
console.log(text);
$('#top_suggestions').html(text).show();
}
});
</script>
<style type="text/css" media="screen">
body {
font: 11px arial;
}
.suggest_link {
background-color: #FFFFFF;
padding: 2px 6px 2px 6px;
}
.suggest_link_over {
background-color: #3366CC;
padding: 2px 6px 2px 6px;
}
#search_suggest {
position: absolute;
background-color: #FFFFFF;
text-align: left;
border: 1px solid #000000;
}
#top_suggestions {
background-color: lightblue;
width: 50%;
}
</style>
</head>
<body>
<h1>THIS PAGE</h1>
<!-- table -->
<table border="0" width="100%">
<tr>
<td valign=top><b> Reas:</b> <!-- annotation pannel -->
</td>
<td width=100% colspan='2'>
<textarea style='width:50%;' name='annotation' rows="2" maxlenght='256' id='annotation'></textarea>
</td>
</tr>
<tr>
<td>
 
</td>
<td align=left>
<input type='submit' value='Go' style='margin-left: -2px;' ></input>
</td>
</tr>
</table>
<hr>
<table border="0" width="100%">
<tr>
<td valign=top><b> Suggestions:</b> <!-- annotation pannel -->
</td>
<td width=100% colspan='2'>
<select id="items">
<option value="s1">Top 5 MOST used for ALL guy</option>
<option value="s2">Top 5 LAST used for ALL guy</option>
<option value="s3">Top 5 MOST used for THIS guy</option>
<option value="s4">Top 5 LAST used for THIS guy</option>
</select>
</td>
<tr>
<td></td>
<td>
<div id='top_suggestions' >
 
</div>
</td>
</tr>
</tr>
</table>
<span id='s1' style='display: none;'>
<div class=list>Non curo. Si metrum non habet, non est poema.1 </div>
<div class=list>Non curo. Si metrum non habet, non est poema.2 </div>
<div class=list>Non curo. Si metrum non habet, non est poema.3 </div>
<div class=list>Non curo. Si metrum non habet, non est poema.4 </div>
<div class=list>Non curo. Si metrum non habet, non est poema.5 </div>
</span>
<span id='s2' style='display: none;'>
<div class=list>Balaenae nobis conservandae sunt1 </div>
<div class=list>Balaenae nobis conservandae sunt2 </div>
<div class=list>Balaenae nobis conservandae sunt3 </div>
<div class=list>Balaenae nobis conservandae sunt4 </div>
<div class=list>Balaenae nobis conservandae sunt5 </div>
</span>
<span id='s3' style='display: none;'>
<div class=list>lalala1 </div>
<div class=list>lalala2 </div>
<div class=list>lalala3 </div>
<div class=list>lalala4 </div>
<div class=list>lalala5 </div>
</span>
<span id='s4' style='display: none;'>
<div class=list>The quick brown fox jumps over the lazy dog1 </div>
<div class=list>The quick brown fox jumps over the lazy dog2 </div>
<div class=list>The quick brown fox jumps over the lazy dog3 </div>
<div class=list>The quick brown fox jumps over the lazy dog4 </div>
<div class=list>The quick brown fox jumps over the lazy dog5 </div>
</span>
</body>
</html>
Hi All, Actually I have to develope a javascript function for moving items from from select box to another select box,I finished that,finally client wants to include a reset button in the same form ,if we click on reset button both select boxes in the form has to store the default values which were at the page loading. Please solve this ..Very Urgent..... Thanks in advance.... ---------- JP. Good morning! I have a problem with a couple of select boxes. I need more than one, due to the size of the list, but I want it so if they choose an option in the first box, then choose an option in the second box, it will deselect the option in the first one. So for example, if these are nested side by side in a table... <td width="20%"><form> <select name="selectMain" size="16" id="selectMain" onChange=" if ( value == 0){ selects (id);} if ( value == 1){ selectc ('Test1',id);} if ( value == 2){ selectc ('Test2',id);} if ( value == 3){ selectc ('Test3',id);} "> <option value="1">Test 1</option> <option value="2">Test 2</option> <option value="3">Test 3</option> </select> </form> </td> <td width="20%"><form> <select size="16" id="selectMain" onChange=" if ( value == 0){ selects (id);} if ( value == 4){ selectc (Test4',id);} if ( value == 5){ selectc ('Test5',id);} if ( value == 6){ selectc ('Test6',id);} "> <option value="17">Test 4</option> <option value="18">Test 5</option> <option value="19">Test 6</option> </select> </form> </td> If someone chooses Test 1 in the first box, it highlights it and displays that content. And if they choose Test 4 it removes the Test 1 content, highlights and displays the Test 4 content. But it leaves Test 1 highlighted as well. There is a lot of missing code here... But hopefully you get the picture. Is there a way to make it so that when they choose Test 4 it will remove the highlighting from Test 1 in the first form? Thanks so much for your help! I have been beating my head on a wall! =D Hi: How do you keep a Select box (and all its many options) from 'spilling over' its bottom <div> boundary ? That is, when a user clicks on the select box to open it and view the options, I wish the number of items shown to be limited to the vertical size of the enclosing division, and to have the user access the remainder of the items with the scroll bar (or the down-arrow key). I welcome any suggestions ! Thank you. -Mel Smith I have a select list on my site that has around 12 entries in it. The problem is that every 5 entries there is a white space entered into the list that I do not want to be there. The only white space I wanted was the very first option I wanted to be white space for a default not entered option in the select list. Does anyone know how to make this problem go away? this may seem rather rudimentary, however, I have googled it to no avail. I want to be able to put "Choose One" or some other message as the default selected option in a select box, but I do not want the user to be able to pick this option. Any ideas on how to make that work? Looking for the simplest way possible. Was thinking using javascript on a focus event or something like that and deleting the option using javascript. Hopefulyl it doesn't come to that. Thanks for the help in advance. mike Hi all! I have two <select>, and, depending on what the user selects in the first one changes the options in the second. For example is the 1st <select> is HONDA, the 2nd <select> will automatically become a list of: ACCORD, CIVIC, etc. But it the 1st is FORD, the 2nd automatically has a list of F-150, MUSTANG, etc -- when the user views it. Is this done in just HTML or do I need a different scripting? If so, would you tell me where I should look? Much appreciated! Hi all, I have a select box in an html form which simply doesn't appear in ie6. I dont know what is relevant to this problem, but loosely, the layout is as follows: <div id="content"> <form> <p class="label"><label for="allocation">Label</label></p> <p class="input"><select name="allocation" id="allocation"> <option value="0">option1</option> ... </select> <div class="clear"></div> </form> </div> the label paragraph is floated left and input floated right, clear simply clears the floats. Other things in the form include tinyMCE textareas and textboxes. The submit button has an onclick handler that validates before returning true or false for php to put values into a mysql database. Everything else works fine but the select box is simply not there in ie6. Any help would be greatly appreciated, Thanks, Conrad I have a select box with restricted width, due to page layout, and the options listed are wider than the select box. This displays fine in Firefox, because as you open the drop-down the options are displayed full-length. However, IE cuts off the option text at the width of the select box. Consider this example: HTML Code: <html>
<head></head>
<body>
<select name="mySelect" style="width:160px;">
<option>This is a really long select box option</option>
</select>
</body>
</html>
Is there a way to get IE to display the entire text? Thanks! Hi, I have one select box and for that 30 options are there, but i need to display only 5 with vertical scroll bars when user clicks on select box. How is it possible? Please help. Hi All, I am new to web development.I would like to know how to optimize the <select> tag based on my requirement By default <select> tag lists contents based on the context(ie. if I type A it will list all possible combinations with A like AA,Aa,Ab,AB,Ac,AC and so on(not in the same order)).Similarly if I type Ab it should list all combinations starting with Ab which it does but the problem is you have to be little quick here otherwise if I press A and wait some time and then press B then I wil get all contents starting with B and not with AB which is what was intented.Is there an alternate to this so that whatever I type will get the apt search results. I got something like this on posting some popular websites: http://extjs.com/deploy/dev/examples/form/combos.html Unobtrusive Transformed select: is what I exactly need.But it did not work exactly.Can anyone help me getting the same without much complexities.I am a Java programmer with very little knowledge of web design and development.Can anyone help? Hi: I have a 'Select' Box with approx 60 options to select from. Problem (in IE6 and IE7): When I click on the button to open up the list of options, the list shoots to the top of my monitor screen instead of opening up *below* the input postition on the screen. This does not happen on FireFox or Safari --- only IE (6 and 7) Question: Is there anything I can do to correct this behavior. Thank you. -Mel Smith hi All, I want to add two select(dropdown lists) boxes. Content of first select box will be name of countries. And the other select box which will contain states of those counties should show the values according to the value selected in first select box. Eg: Suppose I select America then it should only show the states of America. I want to know whether it is possible using simple html? or javascript is required? and how? Regards, Jaas I need to create a <select multiple> type form control, but with two columns. Is this possible? So I need users to be able to select multiple options from a control that displays items in two columns, and should be scrollable. Is there anyway to do this using the default HTML <select multiple> control. if not, is there a more complex method? is there a simple way to use data reposted to a form to determine which option is selected in a select box (based on its setting before)? here is an example of the code i am using at present: Code: <label for="Options">Options</label> <select id="Options" name="Options"> <optgroup label="Select Option"> <option value="Option1">Option1</option> <option value="Option2" selected="selected">Option2</option> <option value="Option3">Option3</option> <option value="Option4">Option4</option> </optgroup> </select> when this is posted the value selected in the select box may have changed (eg: to option3) . In this case it should be re-displayed in the following manner: Code: <label for="Options">Options</label> <select id="Options" name="Options"> <optgroup label="Select Option"> <option value="Option1">Option1</option> <option value="Option2">Option2</option> <option value="Option3" selected="selected">Option3</option> <option value="Option4">Option4</option> </optgroup> </select> i am wondering if the selected="selected" element could be taken outside the option tag and set to point at the relevant option using a more dynamic method (utilising PHP or other methods) - one thing i am trying to avoid is having a PHP statement associated with each option value, in preference using a single statement which sets the relevant option to selected if possible. any ideas? I'm having difficulties with white space in <select> boxes. A simplified example is below; Code: <select> <option>testing (1-2-3)</option> </select> I would like this to appear with the full white space - but instead it trims to 'testing (1-2-3)' in the select box. Anyone any ideas how to make the select box render and return the option including the white space? |
|||||||