|
HTML - More Than One Select Box - Can You Link Them?
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 Similar TutorialsI am wanting to link to a certain option in a select list via an anchor link on another page. Each option displays different info below it using javascript. Example: I have a date on a php based calendar linking to a events page. On the events page is the select list with different events that will show below the list when selected. How can I link that specific date to that event so that it is displayed? Is this possible? Hi All, I've been asked to make some hyperlinks that automatically select items in a drop down menu in a contact form. Is this possible if so, how is it done Thanks in advance Bluestreak I have several links on my site, all in the form of <a href="http://www.mywebsite.com">mywebsite</a> How do I need to change it such that a new instance of the browser is used in which the linked site is displayed. Ive been working on a website in my free time, and I have been wondering if it's possible to hover over a link, and change the text color of another link. A picture of one of my web pages is shown in the link below. http://i223.photobucket.com/albums/d...screenshot.jpg I want to be able to hover over something from the side navigation bars and have various links in the bottom naviational bar change color. So like hovering over Blood Elf, would make Death Knight, Mage, Paladin, Warlock, Priest, Rogue, Hunter turn red Does anyone know how to do this? or even know if it is possible? Hi, I'm newly registered and seeking some assistance. I'm working on a website for a client and come across an issue. The following is my iFrame code: Code: <div id="iframez"> <iframe src="main.html" width="100%" height="400px" name="framez"></iframe> </div> I have a link that is at the bottom of the page that is supposed to load in the iFrame when clicked upon. The code is as follows: Code: <a href="somelink.html" target="framez">some link</a> What I want is when the link is clicked that it loads in the iframe (this works as intended) AND I want the page to scroll up to the iframe. I tried doing this without success: Code: <a href="somelink.html#iframez" target="framez">some link</a> This is interpreted as #iframez in somelink.html, and not the page its on. Is there any way around this? Thanks for your patience. 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 im not sure if this can be done i have created some buttons to use as links and once i put the a href code in a box appears around the button can i remove this and how plz you can see example of what i mean on my website i have made Home and Contact clickable but i want to remove the box thats around the button if possible http://dreamteam0708.co.uk/ for info: im coding my own html in notepad, not using any programs or anything and my hosting doesnt support php etc 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. 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: 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 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 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: 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 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! 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? 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? |
|||||||