|
HTML - Retaining Select Box Settings
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? Similar TutorialsHello everyone. I'm a bit new to these to please bear with me for a second. I hope I am asking this question in the right place. I have a client that want's me to create some emailable stationary that they can in turn send to all their clients. I'm working on a MAC Leopard using Safari and Firefox. The cool thing about Safari is that you can take any webpage and turn it into emailable stationary by going File>email contents of webpage. It will copy images, formatting CSS and I think embedded Java Scripts. So I thought Great. I'll create a simple webpage, turn it into stationary... 30 minutes and I should be done. 3 days later I'm still working on this project and I'm stuck. The issue it the. I have created a webpage. It's very simple you can view it here if you want http://www.drewwfilms.com/Temp/Conte...ate/test3.html The problem is this. I can't get text to stay. If I type text into the Textarea and do something like... create new webpage (to create a new webpage from the current address) the text will not copy into the new document. Does that make sense? So the text getting entered into the textarea where is that in my html code? I've viewed the source code and cannot find it. Is it being entered into cache or something? I do not know enough about this (obviously) and am really looking for some help. Anyone that could give a helping hand I'd really appreciate it. Thanks -D Hi All, I'm not new to HTML, but I heard that with HTML 5 you can partially fill out a form, leave the page and come back to the page and the form will still have the data on it that was previously entered into it without commiting that data to a database. Does anyone know anything about this and some links I can go to learn more about it? Thanks, CalvinC HI, The following code HTML Code: <SELECT NAME="TEST"> <OPTION>TEST TEST</OPTION> </SELECT> renders an option with 'TEST TEST'. Even though there are more than 1 white spaces, only single white space is given. How can I over ride this default behavior? Thanks in advance, Chandu. Basically I have recently added more to my "Navigation Bar" it works fine on a "1366 x 768" that is currently my screen settings. Yet i looked on a 1024 x 768 and it was all over the place. Here is screenshots of what I mean. This is what it looks like on the 1024x768 screen. This is how I want it to look on all screens. So im basically saying what settings to I have to apply to make this a fix on all screens. Cheers. I have created a php file for a feedback form...if i use it and click the submi button an eror comes up: Warning: mail() [function.mail]: Failed to connect to mailserver at "localhost" port 25, verify your "SMTP" and "smtp_port" setting in php.ini or use ini_set() in C:\wamp\www\test.php on line 16 I was told to find this path file C:\wamp\bin\php\php-[your-version]\php.ini and change its smtp settings. I have no idea how to change the smtp settings and what to change it to. any help would be much appreciated. Is this code necessary if I only need zero for all of these, in any given table? Is zero the default setting if none is set? Can I just eliminate this code? FYI (It came as part of a table template.) border=0 cellpadding=0 cellspacing=0 style="margin-top: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>
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: 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: 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 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 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 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! Is there anyway to place images (along with text) in a select tag? 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. 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? |
|||||||