|
JavaScript - 2 Combobox In One Page (2 Level And 3 Levels)
hey
I have a page in which I already have a 3 level combox that works fine. I want to add to that page another combobox of 2 level. When I tried to do it I find out that they control of each other. I tried changing the variables names. (changing "x" into "w" in the second combobox) Well that worked. Can you please help me figure it out? here is the end of the first form: var temp1=document.isc.stage3 function redirect1(y){ for (m=temp1.options.length-1;m>0;m--) temp1.options[m]=null for (i=0;i<secondGroup[document.isc.example.options.selectedIndex][y].length;i++){ temp1.options[i]=new Option(secondGroup[document.isc.example.options.selectedIndex][y][i].text,secondGroup[document.isc.example.options.selectedIndex][y][i].value) } temp1.options[0].selected=true } function redirect2(z){ parent.mainframe.location=temp1[z].value; and here is the end of the second combobox: var temp=document.doublecombo.stage2A function redirect(w){ for (n=temp.options.length-1;n>0;n--) temp.options[n]=null for (k=0;k<groupa[w].length;k++){ temp.options[k]=new Option(groupa[w][k].text,groupa[w][k].value) } temp.options[0].selected=true } function go(){ location=temp.options[temp.selectedIndex1].value } Thanks Elad Similar Tutorials<html> <script language="javascript"> function foo() { var mainDiv = document.getElementById("my"); var div = document.createElement("div"); for(j=0;j<5;j++) { var select = document.createElement("select"); for(i=0;i<5;i++) { var option = document.createElement("option"); option.text = "hmm"; select.appendChild(option); } div.appendChild(select); } mainDiv.appendChild(div); } </script> <body> <select onchange="foo()"> <option>a</option> <option>b</option> <option>c</option> <option>d</option> <option>e</option> <option selected>-----Select------</option> </select> <div id="my"></div> </body> </html> I stuck ... but I got the solution now I want to reset on every selection ? Hello, I have a 2 level combo box that are dependent on each other and what I want to happen when the "submit" button is selected is for an html text answer to be displayed on the same page below the combo boxes based off of what was selected in the second combo box. I've tried using hide/show functions with JavaScript but couldn't figure out how to link the 2 scripts together. What I have is as follows: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">
// first combo box
data_1_1 = new Option("School 1", "$");
data_1_2 = new Option("School 2", "$$");
// second combo box
data_2_1 = new Option("21", "--");
data_2_2 = new Option("22", "--");
data_2_3 = new Option("23", "--");
data_2_4 = new Option("24", "--");
data_2_5 = new Option("25", "--");
// third combo box
// other parameters
displaywhenempty=""
valuewhenempty=-1
displaywhennotempty="-select-"
valuewhennotempty=0
function change(currentbox) {
numb = currentbox.id.split("_");
currentbox = numb[1];
i=parseInt(currentbox)+1
// I empty all combo boxes following the current one
while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
son = document.getElementById("combo_"+i);
// I empty all options except the first one (it isn't allowed)
for (m=son.options.length-1;m>0;m--) son.options[m]=null;
// I reset the first option
son.options[0]=new Option(displaywhenempty,valuewhenempty)
i=i+1
}
// now I create the string with the "base" name ("stringa"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill
stringa='data'
i=0
while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
if (i==currentbox) break;
i=i+1
}
// filling the "son" combo (if exists)
following=parseInt(currentbox)+1
if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
(document.getElementById("combo_"+following)!=null)) {
son = document.getElementById("combo_"+following);
stringa=stringa+"_"
i=0
while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {
// if there are no options, I empty the first option of the "son" combo
// otherwise I put "-select-" in it
if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
if (eval("typeof("+stringa+"1)=='undefined'"))
eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
else
eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
else
eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
i=i+1
}
//son.focus()
i=1
combostatus=''
cstatus=stringa.split("_")
while (cstatus[i]!=null) {
combostatus=combostatus+cstatus[i]
i=i+1
}
return combostatus;
}
}
//-->
</script>
<body>
<form>
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
<option value="value1">-select-</option>
<option value="value2">Delaware</option>
<option value="value3">Pennsylvania</option>
</select>
<BR><BR>
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
<option value="value1"> </option>
</select>
<BR><BR>
<input type="button" name="test" value="Submit"
onclick="go()"><BR>
<BR>
</form>
<body>
</html>
If someone can either assist with this or point me in the right direction of how to do this it would be a great help. Thanks in advance, my password target opens in a new window using the 'open.window' command but i would like a command string that opens this target in the same frame within my frames page that my other pages open in. thanks in advance manj I would like to create a 2-level menu similar to the one use in: http://www.pagina12.com.ar/diario/principal/index.html It is done with CSS? Thanks! Hi, This code works as it should, but I want to enhance it so that it does a search by category within the Regions/Provinces selected. But I'm not an expert with Javascript, actually the complete reverse. This if for a classified ads website, so the categories are like cars, homes, etc Code: <html>
<head>
<title></title>
<meta content="">
<style></style>
<script language="JavaScript">
function loadPage(list) { location.href=list.options[list.selectedIndex].value }
</script>
</head>
<body>
<table align="center">
<tr>
<td>
<form>
<div align="center">
Search by
<select name="file" size="1"
onchange="loadPage(this.form.elements[0])"
target="_parent._top"
onmouseclick="this.focus()">
<option value select="selected">Regions</option>
<option value="http://www.apple.com">Region 1</option>
<option value="http://www.apple.com">Region 2</option>
<option value="http://www.apple.com">Region 3</option>
</select>
</form>
</td>
<td>
<form>
or
<select name="file" size="1"
onchange="loadPage(this.form.elements[0])"
target="_parent._top"
onmouseclick="this.focus()">
<option value select="selected">Provinces</option>
<option value="http://www.apple.com">Province 1</option>
<option value="http://www.apple.com">Province 2</option>
<option value="http://www.apple.com">Province 3</option>
</select>
</div></form>
</td></tr></table>
</body>
</html>
Any help would be appreciated. Or any improvements would also be appreciated. Also, any help in converting the table to CSS would be appreciated. Hello folks, I want to have a combobox with bookmark options. After you select a value from this combobox you can bookmark it with a push button. This should popup a bookmark dialog from the browser bookmark dialog. Can anybody help me? Lets say we have 3 options in the value's. Google, Yahoo, Bing When you select Google and you push Place bookmark you should get a browser bookmark dialog with a title "Google search site". The url would be just http://www.google.com/ I also want Yahoo with the url http://www.yahoo.com/ and the bookmark title Search at Yahoo! and Bing with the url http://www.bing.com and the title Search at Bing I'm looking already for a while for this. Can anybody help me? Thanks in advance! grid hey i have combo box it has names name -1 name-2 name-3 name-4 when select a name-1 just display a alert message of age plz help me to do this plz any sample coding for this I am working on some sort of a program that will load data from a notepad or Excel file and load it into a ComboBox. The notepad file would have names and phone numbers in it. The ComboBox would only show their names in alphabetical order. There would also be a button that when you click it, it would open up Outlook (if you are signed into Outlook) and auto-fill the form with their phone number @ vtext.net (for texting verizon cell phones). The reason behind this is so the notepad or Excel file can be edited to add more users as the company expands. I'm on a time crunch and haven't really been able to figure out how to do the data on load. If anyone could help and explain their code a little bit I would be very grateful. I haven't touched JavaScript in around 5 years so I'm very rusty. Thanks. Hi guys, Let me explain simply what I do and what I'm trying to achieve: I got a couple of comboboxes were the user selects a series of numbers. Once a selection is made, the value is appended to an input box. The idea is that the appended values form a telephone number, or at least part of one, that will then be used to search trough a database to look for a matching number. The code below is what I have done so far: Code: <script type="text/javascript">
function displayIndicatif(){
var sel = document.getElementById("indicatif");
var text = sel.options[sel.selectedIndex].value;
var out = document.getElementById("blabla");
out.value += text+"\n";
}
function displayBloc(){
var sel1 = document.getElementById("bloc");
var text1 = sel1.options[sel1.selectedIndex].value;
var out1 = document.getElementById("blabla");
out1.value += text1+"\n";
}
</script>
[...]
<input type="text" id="blabla"/>
[..]
<select id="indicatif" onChange="displayIndicatif();">
<option value="021">021</option>
<option value="022">022</option>
<option value="031">031</option>
</select>
<select id="bloc" onChange="displayBloc();">
<option value="555" class="021">555</option>
<option value="666" class="021">666</option>
<option value="777" class="021">777</option>
</select>
Basically what happens now is this: combobox indicatif: 021 | 022 | 031 combobox bloc: 555 | 666 | 777 If I select "021" from indicatif, the script will append 021 to the input "blabla". The problem is, if I now select "022", the input will show "021022" instead of replacing the 021 with 022. What I would like is that, for each combobox, the script replaces the selected value with the new one instead of simply appending it, like instead of say 021022555666 it would show 021555 or 022666 or 021666 depending on what is selected...you get the idea? Is this doable? Needless to say I'm a total noob at javascript...I adapted the code I got now from some other guy who was trying to achieve almost the same thing and adapted it to my needs, or least, tried to, but now I'm stuck. Any help is appreciated! Thanks I have a WYSIWYG text area and I want to insert combo-box' value at current cursor location of the WYSIWYG text area. I have a simple textarea where the value is inserting on combo-box clicking. But when I do integrate both files, the functionality wont work. I have both scripting files..
Hi Within a classic asp webform (using vbscript) I would like part of the form (input boxes within table structure) to be specific/displayed depending on the users selection from the combo box in the row above. I think the best solution would be using Javascript can anyone suggest a solution or example code? Many thanks Sarah Hi I'm new to javascript, so this is probably very simple. I've created a form with combobox with different values (this is for my website). What I want is when the user clicks 'submit' that it goes to a different page on the website depending on the value the person has selected in the combobox. Values are numerical, for example 1000, 2000, 5000 etc. I've been trying this for a couple of days now without success! Thanks in advance Hi There. I've been reading this forum for quite sometime, but today is my first post, hope you guys can help. Here is how the code works: (its like a phone directory) -User first selects the dept. -Once selected, a second drop down populates with the names of each person in that department. -I want the contact info to show on the page once they select this last step. I need for when the user selects this second options for a link to open inside a iFrame inside of the same html page. I uploaded the file here for you to see: www.pioneer-energy.us/tf2/contact-us.html Here is the code for the HTML doc: Code: <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onLoad="fillCategory();"> <FORM name="drop_list" action="yourpage.php" method="POST" > <SELECT NAME="Department" onChange="SelectSubCat();" > <Option value="">Select Department</option> </SELECT> <SELECT id="SubCat" NAME="SubCat"> <Option value="">SubCat</option> </SELECT> </form> Here is the .js file code Code: function fillCategory(){
// this function is used to fill the category list on load
addOption(document.drop_list.Department, "Executive-Management", "Executive Management");
addOption(document.drop_list.Department, "Marketing", "Marketing", "");
addOption(document.drop_list.Department, "Annuities", "Annuities", "");
addOption(document.drop_list.Department, "Underwriting/Case Management", "Underwriting/Case Management", "");
addOption(document.drop_list.Department, "Human Resources", "Human Resources", "");
addOption(document.drop_list.Department, "Commissions", "Commissions", "");
addOption(document.drop_list.Department, "Policy Owner Services", "Policy Owner Services", "");
addOption(document.drop_list.Department, "Information Technology", "Information Technology", "");
addOption(document.drop_list.Department, "APS", "APS", "");
}
function SelectSubCat(){
// ON selection of category this function will work
removeAllOptions(document.drop_list.SubCat);
addOption(document.drop_list.SubCat, "", "SubCat", "");
if(document.drop_list.Department.value == 'Executive-Management'){
addOption(document.drop_list.SubCat,"MartyGreenberg", "Marty Greenberg - President");
addOption(document.drop_list.SubCat,"LisaGreenberg ", "Lisa Greenberg - Vice President");
addOption(document.drop_list.SubCat,"CraigBrown", "Craig Brown - CFO");
addOption(document.drop_list.SubCat,"RitaBogan", "Rita Bogan - Executive Secretary & Case Management");
addOption(document.drop_list.SubCat,"DianaGreenberg", "Diana Greenberg - Underwriting Manager");
}
if(document.drop_list.Department.value == 'Marketing'){
addOption(document.drop_list.SubCat,"RonBielefelt", "Ron Bielefelt - Chief Marketing Officer");
addOption(document.drop_list.SubCat,"PeterMilanez", "Peter Milanez - Brokerage Manager");
addOption(document.drop_list.SubCat,"MarkRBugli", "Mark R. Bugli - CLU, ChFC ");
addOption(document.drop_list.SubCat,"HowardMandel", "Howard Mandel - Director of Business Development");
addOption(document.drop_list.SubCat,"DeborahSanchez", "Deborah Sanchez - Brokerage Supervisor ");
addOption(document.drop_list.SubCat,"SylviaMariscal", "Sylvia Mariscal - Life Settlements");
addOption(document.drop_list.SubCat,"PeterMilanez", "Peter Milanez - Brokerage Manager");
addOption(document.drop_list.SubCat,"JosephTanner", "Joseph Tanner - Brokerage Manager Assistant", "");
}
if(document.drop_list.Department.value == 'Annuities'){
addOption(document.drop_list.SubCat,"SethMoses", "Seth Moses - Director of Annuities");
addOption(document.drop_list.SubCat,"SteveAvila", "Steve Avila - Assistant to Seth Moses");
}
if(document.drop_list.Department.value == 'Underwriting/Case Management'){
addOption(document.drop_list.SubCat,"DianaGreenberg", "Diana Greenberg - Underwriting Manager");
addOption(document.drop_list.SubCat,"KimberlyFleming", "Kimberly Fleming - Case Manager ");
addOption(document.drop_list.SubCat,"LarissaBurton", "Larissa Burton - Case Manager Assistant to Kimberly Fleming");
addOption(document.drop_list.SubCat,"MariaAntebi", "Maria Antebi - Case Manager");
addOption(document.drop_list.SubCat,"LilianaGalvan", "Liliana Galvan - Case Manager");
addOption(document.drop_list.SubCat,"KimberlyKoontz", "Kimberly Koontz - Case Manager Assistant to Liliana Galvan");
addOption(document.drop_list.SubCat,"ChastaSpikes", "Chasta Spikes - Case Manager");
addOption(document.drop_list.SubCat,"SylviaMarsicalShank", "Sylvia Marsical-Shank - Case Manager");
addOption(document.drop_list.SubCat,"TriciaRomain ", "Tricia Romain - Case Manager");
addOption(document.drop_list.SubCat,"BetoRuiz", "Beto Ruiz - Case Manager");
addOption(document.drop_list.SubCat,"DavidGarcia", "David Garcia - Case Manager Assistant");
}
if(document.drop_list.Department.value == 'Human Resources'){
addOption(document.drop_list.SubCat,"MarieOkamura", "Marie Okamura - Human Resources Director");
}
if(document.drop_list.Department.value == 'Commissions'){
addOption(document.drop_list.SubCat,"WalterHelbig", "Walter Helbig, FLMI - Licensing");
addOption(document.drop_list.SubCat,"KenFong", "Ken Fong - Licensing");
addOption(document.drop_list.SubCat,"JimTigrak", "Jim Tigrak - Commissions");
}
if(document.drop_list.Department.value == 'Licensing'){
addOption(document.drop_list.SubCat,"TessSlezak ", "Tess Slezak - Licensing");
addOption(document.drop_list.SubCat,"ArleneAuerhan ", "ArleneAuerhan - Licensing");
addOption(document.drop_list.SubCat,"JimTigrak", "Jim Tigrak - Forms & Supplies");
}
if(document.drop_list.Department.value == 'Policy Owner Services'){
addOption(document.drop_list.SubCat,"LanTran", "Lan Tran - Policy Services");
addOption(document.drop_list.SubCat,"GianSanchez ", "Gian Sanchez - Receptionist");
addOption(document.drop_list.SubCat,"ArmonTodd ", "Armon Todd - Office Support");
}
if(document.drop_list.Department.value == 'Information Technology'){
addOption(document.drop_list.SubCat,"HenryCholakyan ", "Henry Cholakyan - IT Director");
}
if(document.drop_list.Department.value == 'APS'){
addOption(document.drop_list.SubCat,"CarmenAllen ", "Carmen Allen - APS Supervisor");
}
}
//////////////////
function removeAllOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
//selectbox.options.remove(i);
selectbox.remove(i);
}
}
function addOption(selectbox, value, text )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}
Thanks for any help in advanced! Hi i am working on a website project.. in which i have like.. for the menu.. i have a horizontal menu.. with three tabs for eg... Home , about us, contact us and.. when i click on the Home tab, i need a horizontal submenu with four or five links.. say for eg : menu1,menu2,menu3,menu4,menu4 and menu5 and when i click on menu1 i need a vertical menu on click of of menu1. so i need two horizontal menu and one vertical menu. i have attached a sample image of my menu. please have a look. Can i do this in javascript.. I need to do this using html , css or jquery.. How do i ... Please help me Is there a way add another dropdown form to this script? http://javascript.internet.com/navig...-comboxes.html Or do you happen to have another script that does the same job? I need three level connected dropdown boxes. Each one should be filtered according to previous selection and should be empty before that selection is made... Thanks in advance... I'm looking for four level connected drop down boxes. Unlike all the scripts I have seen on the internet I need all the options to be available if nothing is selected in the previous drop down. So I want something like combination of connected drop downs and ordinary drop down. If the selection is made, display appropriate options in other drop downs... Hope I'm clear... Ex: If I had three properties in Spain, ----------------------------------------------------------------------------------------------------------- | -------- Country: Spain --------- | -------- Country: Spain --------- | -------- Country: Spain ---------- | | -------- State: Andalusia ------- | -------- State: Andalusia -------- | -------- State: Catalonia --------- | | -------- District: Malaga -------- | -------- District: Granada ------- | -------- District: Barcelona ------- | | -------- Town: Marbella --------- | -------- Town: Motril ----------- | --------- Town: Badalona -------- | ----------------------------------------------------------------------------------------------------------- it should show me all the list of available locations, but when I choose Andalusia, it would only show two rest locations – Malaga and Granada, and the same rule when choosing district – Malaga->Marbella Can anyone please help? I need it very much... Thanks in advance! Hey everyone, I need some help with a function. I'm using ajax to grab a response from a PHP page, on success, the ajax sets a variable. After the line that calls the ajax function is the line the returns the variable (a global variable). Problem is, because the variable is returned right after the ajax function is fired, it doesn't give the ajax enough time to set the variable. The work around I've thought about would be using the ajax function as a variable, and returning that variable in the initial return line. Could anyone either help me with a better solution, or tell me what I'm doing wrong? Here's some code for reference: The function that will return the response I'm trying to collect: Code: function lt_ajaxGet(hash) {
var params = "hash=" + escape(encodeURI(hash));
makePOSTRequest('hash.php?get', params);
return ajax_response;
}
The ajax code: Code: if(http_request.status == 200){
ajax_response = http_request.responseText;
}
Resolved.
Hi, I would like to use the menu that is linked below. I implemented it on my website but I discovered that it can only go 2 levels deep. I would like it to go one more level and I think that would be done in the javascript but I can't tell for sure. Could someone steer me in the right direction? http://www.javascriptkit.com/script/...icalmenu.shtml Thanks! Rob I have a working code of 2 level horizontal tab menu....it is now onmouse over ,I want to convert it to onclick....can anyone help in this regard.. I have taken from.... http://www.javascriptkit.com/script/...leveltab.shtml The javascript.... Code: var mastertabvar=new Object()
mastertabvar.baseopacity=0
mastertabvar.browserdetect=""
function showsubmenu(masterid, id){
if (typeof highlighting!="undefined")
clearInterval(highlighting)
submenuobject=document.getElementById(id)
mastertabvar.browserdetect=submenuobject.filters? "ie" : typeof submenuobject.style.MozOpacity=="string"? "mozilla" : ""
hidesubmenus(mastertabvar[masterid])
submenuobject.style.display="block"
instantset(mastertabvar.baseopacity)
highlighting=setInterval("gradualfade(submenuobject)",50)
}
function hidesubmenus(submenuarray){
for (var i=0; i<submenuarray.length; i++)
document.getElementById(submenuarray[i]).style.display="none"
}
function instantset(degree){
if (mastertabvar.browserdetect=="mozilla")
submenuobject.style.MozOpacity=degree/100
else if (mastertabvar.browserdetect=="ie")
submenuobject.filters.alpha.opacity=degree
}
function gradualfade(cur2){
if (mastertabvar.browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (mastertabvar.browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (typeof highlighting!="undefined") //fading animation over
clearInterval(highlighting)
}
function initalizetab(tabid){
mastertabvar[tabid]=new Array()
var menuitems=document.getElementById(tabid).getElementsByTagName("li")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab
mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel") //store ids of submenus of tab menu
if (menuitems[i].className=="selected")
showsubmenu(tabid, menuitems[i].getAttribute("rel"))
menuitems[i].getElementsByTagName("a")[0].onmouseover=function(){
showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
}
}
}
}
|
|||||||