|
JavaScript - Help With A Javascript Dropdown?
Hi all! I'm new and, well, I don't know a whole lot about javascript, honestly. I'm much more of an artistic design person than I am a coder.
That said, I recently made a dropdown menu using an old version of Fireworks, but I've been having trouble getting it working on my site. The menu displays alright, but the dropdown does not appear right below it...instead, it's off and to the right somewhere. For the life of me, and with my limited knowledge, I cannot figure out how to fix it. The menu in question is the 'store' button on the following webpage- http://rlfcomic.com/test2.php# Note how the dropdown just seems to float at an arbitrary spot. Any ideas on what I'm doing wrong? Similar TutorialsI created the following javascript to display info when you choose from a dropdown <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td>View Local Contact </td> <td><select name="ContentListBox" id="ContentListBox" onchange="javascript:ShowDiv();"> <option value="">Select State</option> <option value="AK">Alaska</option> <option value="AL">Alabama</option> <option value="AR">Arkansas</option> </select></td> <td> </td> </tr> </table> <div id="AK" style="display:none;"></div> <div id="AL" style="display:none;"><div class="salesman">Marilyn O. Rogers </div> <div class="salesphone">Phone/Fax: 615-824-7804</div> <div class="salesemail">E-mail: <a href="mailto:morogers1@comcast.net">morogers1@comcast.net</a></div></div> <div id="AR" style="display:none;"><div class="salesman">Lonnie Muse</div> <div class="salesphone">Phone: 432-366-9213</div> <div class="salesemail">E-mail: <a href="mailto:muselon@sbcglobal.net">muselon@sbcglobal.net</a></div></div> When you choose the second one and then the third one the second choice does not disappear and it displays both. How can i refresh in between each one so that is displays only one? Hi everyone, I'm needing some help with a code and looking for some guidance. I'm trying to create two drop down menus that work together. the first dropdown box displays the country with two titles, Can and USA. the other dropdown box displays the province/state. when Can is selected, 10 provinces is listed in the second box. when USA is selected, 50 states is listed in the second box The second menu is disabled until they select from the first menu any help is appreciated! My Javascript dropdown menu drops down behind my embedded music player on my website (http://www.blackoutplaylists.com). I need help fixing this, I've tried everything and can't seem to get it fixed. Any suggestions?
I am using a drop down menu for a website I'm working on to display menu items under categories. I'm using the same code to do this on two different pages with the actual content of the menu's loading from a MySQL database using PHP scripts. www.browniepointscatering.com/menu.php www.browniepointscatering.com/seasonal.php On the menu.php page I left the code below in the mix which drops down the first category listed on the left. On the seasonal.php page I took the code below out and it no longer drops down any menu by default when the page is loaded. What I'd like to do is drop down nothing initially when the page is loaded but if someone opens up the "Cupcakes" category and clicks on an item it would keep that category open when it loads the item details in the center column. If you need to see more code let me know! <!-- Add-On Code: Show Select Containers On Load --> <script type="text/javascript">/* <![CDATA[ */if(!qmad.sopen){qmad.sopen=new Object();qmad.sopen.log=new Array();if(window.attachEvent)window.attachEvent("onload",qm_sopen_init);else if(window.addEventListener)window.addEventListener("load",qm_sopen_init,1);};function qm_sopen_init(e,go){if(window.qmv)return;if(!go){setTimeout("qm_sopen_init(null,1)",10);return;}var i;var ql=qmad.sopen.log;for(i=0;i<10;i++){var a;if(a=document.getElementById("qm"+i)){var dd=a.getElementsByTagName("DIV");for(var j=0;j<dd.length;j++){if(dd[j].idiv.className.indexOf("qm-startopen")+1){ql.push(dd[j].idiv);var f=dd[j][qp];if(!qm_a(f)){var b=false;for(var k=0;k<ql.length;k++){if(ql[k]==f.idiv)ql[k]=null;}ql.push(f.idiv);f=f[qp];}}}}}var se=0;var sc=0;if(qmad.tree){se=qmad.tree.etype;sc=qmad.tree.ctype;qmad.tree.etype=0;qmad.tree.ctype=0;}for(i= ql.length-1;i>=0;i--){if(ql[i]){qm_oo(new Object(),ql[i],1);qm_li=null;}}if(qmad.tree){qmad.tree.etype=se;qmad.tree.ctype=sc;}}/* ]]> */</script> Hello all. I need desperate help with this. The code below is two drop down menus where if you pick one of the values in the first drop down menu and pick the same exact value in the second drop down menu then it will give you an error stating that you can only select that value once. Example: if i choose T2 on the first drop down menu and select T2 on the second drop down it will print an error stating that you need to select another option. Here is where I need help. I want to have one of the drop down menus on one page named p1.html and have the other drop down on another page called p2.html. I need a solution on how to pass the information from the first drop down on p1.html to p2.html so it will know which was chosen on p1.html can anyone please help? Here is the code Code: <html> <title> hi </title> <head> </head> <body> First Choice: <select name="ThursAM_First" size="1" id="ThursAM_First" onchange="return no_dupes(this,ThursAM_Second)"> <option value="" selected>• choose •</option> <option value=""></option> <option value="T1">T1</option> <option value="T2">T2</option> <option value="T3">T3</option> <option value="T4">T4</option> </select> Second Choice: <select name="ThursAM_Second" size="1" id="ThursAM_Second" onchange="return no_dupes(this,ThursAM_First)"> <option value="" selected>• choose •</option> <option value=""></option> <option value="T1">T1</option> <option value="T2">T2</option> <option value="T3">T3</option> <option value="T4">T4</option> </select> </html> <script type="text/javascript" src="new.js"></script> Here is the javascript code that will give you an error if you select the same value twice... Code:
function no_dupes(oSelect, oSelect2)
{
var selval = oSelect.options[oSelect.selectedIndex].v…
var opt, i = 0;
while (opt = oSelect2.options[i++])
if (opt.value && !opt.defaultSelected && (opt.selected && opt.value == selval))
{
alert("\n Sorry, you already choose this point value for round 1. Please select another!\nThanks.");
oSelect.selectedIndex = 0;
return false;
}
}
I may need to use a cookie but I have no idea how to that. Thank you all!!! I just recently bought 2 books, AJAX and Javascript, to help me in writing a wep application. They have been great so far except for one thing. I am trying to populate a dropdown list with an XML file, but I want it to load into the dropdown list only AFTER a radio button has been clicked. Does anyone know how to do this or does anyone know where I could go to get some insight on this? Thanks.
hii i struck ed with problem from last one weak. i want validations for two dropdown menu's... when user click on second dropdown menu by skipping first dropdown menu at that time alert box will come and it should say please select from upper menu.... please help me thanks this is the code but it's not working <HTML><HEAD> <TITLE>drop down validation</TITLE> <script type="text/javascript"> function validateForm(){ if(document.ItemList.Item.selectedIndex==0) { alert("Please select item from first list."); document.ItemList.Item.focus(); return false; } return true; } </SCRIPT> </HEAD> <BODY> Please choose an item from the drop down menu: <form name="ItemList" method="post" action="asp.html" onsubmit="validateForm()"> <table width="100%" border="0"> <tr> <td width="135">Choose a username: </td> <td> <select name="Item"> <option value selected> SELECT </option> <option value>Apples</option> <option value>Oranges</option> </select> <table width="100%" border="0"> <tr> <td width="135">Choose a username: </td> <td> <select name="Item" onchange="validateForm()"> <option value selected> SELECT </option> <option value>Apples</option> <option value>Oranges</option> </select> <input type="submit" name="Submit" value="Submit"> </td></tr></table></form> </BODY> </HTML> I need to highlight rows in a dropdownlist. I need to do this inside a function. I have a textbox filled with the indexes of the rows which need to be highlighted - e.g. by changing the background colour to blue. This is my function: function HighlightSelection() { var myList = document.getElementById('dropdown'); var myString = document.getElementById('textbox').value; var listitem; if (myString.length>0){ var mySplitResult = myString.split(";"); var thisInx; for (i = 0; i < mySplitResult.length; i++) { thisInx = mySplitResult[i] listitem = myList.options[thisInx]; // listitem.style.color='red'; } } } the index (thisInx) is correct - but setting its color does not work. Hello Folks, Here is my dropdown menu: Code: <select name="peeps"> <option value="Frank Tompson">Frank Tompson</option> <option value="Henry Wilson">Henry Wilson</option> <option value="Bill Kent">Bill Kent</option> <option value="Jessi McDonald"> Jessi McDonald</option> <option value="John Hays">John Hays</option> How can i make it so if i click on John Hays a JavaScript pop up will say Hello John Hays, and if i click on Bill Kent a popup will say hello Bill Kent and if i click on any other name nothing happens? I am trying to use a javascript plugin for jQuery library that transforms a regular select html element into a dropdown checkbox list (Dropdown Check List, see http://code.google.com/p/dropdown-check-list/), however I believe that the prototype library that I am loading immediately after the jquery library is still conflicting with it somehow even though I modified my code to reflect the following changes (which is supposed to allow the use of prototype with jquery): http://docs.jquery.com/Using_jQuery_...ther_Libraries (Including jQuery before Other Libraries) My code (in a cold fusion environment, which should be irrelevant) looks like this: Code:
<html>
<head>
<SCRIPT LANGUAGE="JavaScript" SRC="js/jQuery/jquery.js" TYPE="text/javascript"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="js/prototype.js" TYPE="text/javascript"></SCRIPT>
<script language="javascript" type="text/javascript" src="js/jQuery/ui.core.js"></script>
<script language="javascript" type="text/javascript" src="js/jQuery/ui.dropdownchecklist.js"></script>
<script language="javascript" type="text/javascript">
jQuery(document).ready(function() {
jQuery("#cbo_status").dropdownchecklist({ width: 200, maxDropHeight: 120 });
});
</script>
</head>
<body>
<select id="cbo_status" name="cbo_status" multiple="multiple">
<option value="-1">All</option>
<option value="1" SELECTED>Assigned</option>
<option value="2" SELECTED>In Progress</option>
<option value="3" SELECTED>Complete</option>
<option value="4" SELECTED>Verified Resolved</option>
<option value="5" SELECTED>Will not be addressed</option>
<option value="6" SELECTED>Wishlist</option>
</select>
</body>
</html>
When I run the debugger, here's the error I'm still receiving: Error: Object doesn't support this property or method (pointing to the line below, character 3) jQuery("#cbo_status").dropdownchecklist({ width: 200, maxDropHeight: 120 }); Does anyone have any idea why this might still be failing? There are two pages, folder/india.html folder/usa.html and dropdown menu in each page to switch between india and usa pages. india.html page sells in INR and usa.html in USD with links to shopping carts for each currency. link1(INR) link2(USD) Except the link and the currency information(selling price), contents in both the pages are same. So here comes the problem. Google hates duplicate pages! I am looking for a solution where, a single page In That Page, a dropdown menu to select currency As the currency is selected, without page reload, the link to shopping cart and the pricing also should be changed according to the selected currency. So Single page should be able to handle both the currencies. Kindly suggest me with codes as I am new to javascript. Thanks a lot Hello. The code below lets a user select a drop down option and a picture changes depending on the selection. I am trying to make it so when you select an option on the dropdown the picture shows up in the center of the screen and in the background behind the text. Here is the code. Code: <html>
<head>
<style type='text/css'>
#txt {background-repeat:no-repeat;width:200px;height:200px;}
</style>
<script type='text/javascript'>
function div_bg(team){
document.getElementById('txt').style.backgroundImage="url(images/" + team + ".jpg)";
}
</script>
</head>
<body>
<select name='team' onChange='div_bg(this.value);'>
<option name='arsenal' value='arsenal'>Arsenal</option>
<option name='liverpool' value='liverpool'>Liverpool</option>
</select>
<div id='txt'></div>
</body>
Thanks in advance!! what can be the reasons for the same code which works perfectly in notepad to not show its result in a jsp application done using eclipse??anything to do with settings? I am not able to display the current date as default in dd/mm/yyyy format in drop down boxes..only dd and yyyy apears but month isnt apearing as default.. can u suggest alternative logic and its code to implement the same?? Hi, I'm trying to integrate an address finder (http://www.craftyclicks.co.uk/) into my shopping cart (OsCommerce). I can get it to work but I need to add my own functionality. I'm not very experienced with JavaScript and my head has entered an infinite loop by now. The problem is that the address finder script can change the selected country in a drop-down list depending on the postcode entered by the user (using the onblur event handler). What I need it to do is to remove all other countries depending on the postcode. I can get it to remove all other countries but how do i return to the original list of countries when the postcode is changed again? Once all other counties are removed, the drop-down list will obviously only have one option left... I guess the question is also how does a function remember what it has done before, when it is called again? I have written this short test script as it is easier to work with than the craftyclicks oscommerce contribution: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
//<![CDATA[
function store(element) {
// store values
var cl = element;
var text_list = new Array();
var value_list = new Array();
var length = cl.length;
for (var foo=0; foo<length; foo++) {
text_list[foo] = cl.options[foo].text;
value_list[foo] = cl.options[foo].value;
alert("text array " + foo + " " + text_list[foo]);
alert("value array " + foo + " " + value_list[foo]);
}
populate(cl, text_list, value_list);
}
function populate(element, text, value) {
// populate options with previously stored values
var cl = element;
var length = cl.length;
cl.options.length=0;
for (var bar=0; bar<length; bar++) {
cl.options[bar]= new Option(text[bar], value[bar], false, false);
}
}
function crafty_set_country(code) {
var cl = document.getElementById('select');
store(cl);
for (var i=0; i<cl.length; i++) {
if (cl.options[i].value == code) {
alert(cl.options[i].value + " found");
var value = cl.options[i].value;
var text = cl.options[i].text;
cl.options.length=0;
cl.options[0]=new Option(text, value, true, true);
/*
for (var j=0; j<cl.length; j++) {
alert("second loop " + cl.options[j].text);
if (cl.options[i].value != code) {
cl.options[j]
}
}
*/
} else {
alert(cl.options[i].value);
}
}
}
//]]>
</script>
</head>
<body>
<form>
<select id="select">
<option value="10">ten</option>
<option value="20">twenty</option>
<option value="30">thirty</option>
<option value="40">fourty</option>
<option value="50">fifty</option>
<option value="60">sixty</option>
</select>
<input type="button" value="remove" name="button" onClick="crafty_set_country(50)">
<input type="button" value="repopulate" name="button" onClick="crafty_set_country(100)">
</form>
</body>
</html>
Many thanks! Martin hey guys The first dropdown has some options as : abc(a) bcd(a) cde(b) def(b) efg(c) fgh(c) The second dropdown has : a b c On selecting abc(a) in first dropdown the 'a' must get selected in second dropdown,on selecting cde(b) second dropdown must have 'b' and so on,also the second dropdown value should be disabled(grayed out) for user.Need the code in javascript.ty in advance. Hello, I am completely new to HTML/JS/CSS, therefore I know very little. I have two drop-down prompt controls with month names. One has just one value (say "July") and the other has all the months of the year ("January".."December"). The first prompt control is hidden on the page. How do I set the default selection of the second prompt control to the value present in the first prompt control? So, when the page is run, the second prompt control should automatically show "July". I was reading up on the selectedIndex property (?), but I know that it won't work because I want Index 0 to be selected in the first control and Index 6 in the second, and I expect it to change every month (next month it will be index 7 that should be automatically selected). If it matters, I am using IE8. Thanks! Hi, I have two dropdown lists with the second one being dependent on the selection in the first. Options in list 1: 1,3 or 4 List two should be enabled when 3 or 4 is selected in list 1. So far so good, managed to get it to work with only one set of lists, but I actually have 18 of those sets in this form: Code: <select name="fw[$i]" id="fw[$i]"> <option value="1">FWH</option> <option value="3">links</option> <option value="4">rechts</option> <option value="0" selected></option> </select><br /> <select name="lie[$i]" id="lie[$i]" disabled="disabled" onchange="showBox($i,xxx);"> <option value="0" selected>---</option> <option value="1">gut</option> <option value="2">schlecht</option> <option value="3">Strafschlag</option> <option value="4">OB</option> </select> $i is my index generated by my PHP script and runs from 1 to 18. Everything works just fine as long as the index is not in play. With the index my function breaks, most probably due to my inability to extract the second parameter (xxx above) from the selection field. Here's my function, there could be something wrong there too with how exactly to specify the proper dropdown list to enable. Code: function showBox(field,val) {
if (val > 1) {
var box = 'lie[' + field + ']';
document.form1.box.disabled == false;
}
else {
document.form1.box.disabled == true;
}
}
Finally, I'm not that adept in javascript programming, more like a trial and error guy, how has hit the wall with this problem. Thanks in advance! Joe if i press any key from keyboard all related word to that alphabet will display below the dropdown.what is the code for it.thanks.
if I had two dropdown boxes... If I select the first one with the value of the month name .. eg.. January. How can I get the second dropdown box below to get that same value.?? Thanks S. |
|||||||