|
HTML - Ie Select Box Problem
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! Similar TutorialsHi, 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. 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? 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: Problem with understanding/using the <select /> clause. I would like the page sent to the user (upon loading) to show the chosen location (i.e., a State of the USA) when I send an updated page with a specified 'Value' set: Here is an abbreviated portion of my Select Clause: <select name="homestate"> <option selected="selected" value="CA">Select State</option> /*note the 'CA*/ <option value="AK">Alaska</option> <option value="AR">Arkansas</option> <option value="CA">California</option> /* I want California to display */ </select> Note that my 'Value' above for the "selected" option is "CA" (for California). However, if I send this updated page to my user with *his* state as 'CA', it still shows as 'Select State' -- where I wish 'California' to display in the Select Default Box. Question: Is there some way that I can make the Select Clause bring up the word 'California' when it accesses the Value='CA' and so on with other 'value' choices ?? (or does this have to be done (somehow) with Javascript ?? Thanks for any guidance ! -Mel Smith I have a <select> drop down list. I have a label associated with this element. Here is the code; <select name="v" id="v" value="0" size="1"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> <label for="v">No. required</label><br /> The problem is that when the user clicks on the text of the label, the value in the <select> list is changed back to 0. For example, the user selects 3 using the drop down list. Then if the user ever clicks on the label's text, this value returns to 0. How can I stop this from happening and maintain the initially diisplayed value of the <select> list as 0? 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, 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. 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, 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? 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 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 Is there anyway to place images (along with text) in a select tag? 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 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 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 I have a SELECT selection list (standard code), in a form which is 200px wide (located in the sidebar of a web page). Some of the OPTION elements in the list can be quite long. In FF, this isn't a problem as when you click on the dropdown arrow, the dropdown box is widened so each option text can be seen fully. But in IE, the dropdown box is limited to 200px wide, so you can't fully see some of the options. Is there any way to solve so you can fully see the options in IE? Thanks, James 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? Hello all, I have a stong question because i can't solve it. I want to creat a drop down list with images beside each row. Usualy on clasic html is something like this: select ... option value /option /select But i want a small image (icon) beside each option from select. See for example: http://www.scrigroup.com/afaceri/con...ate/index7.php on the top page see a clasic select. How can i change it to icon seclect on each option? Thanks for your effort to reply |
|||||||