Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Drop down list - onselect event 1

Status
Not open for further replies.
Nebooaw

Nebooaw

Programmer
Jun 1, 2001
142
GB
Hi, i have a drop down list with 2 items in it. I want to call a javascript function when i select an item. There is a twist though. if i select item 1 out of the list i want to call function 1 and if i select item 2 out of the list i want to call function2.

this is what i am currently doing with check boxes...

div align="center"><b><font size="-1"><%=TableA_Lable%>
<input type="checkbox" id="checkTableA" onClick="updateRule( '.tableA', this );" name="TableA" checked/>
<%=TableB_Lable%>
<input type="checkbox" id="checkTableB" onClick="updateRule( '.tableB', this );" name="TableB" checked/>

Can anyone help me convert the two check boxes into a dropdown list????


kindest thanks,

nebooaw
 
Sort by date Sort by votes
here's a quick example, you can modify it to reflect your existing code:
Code: 
<script language=JavaScript>

function blah1() {
   alert("this is function 1");
}

function blah2() {
   alert("this is function 2");
}

</script>
<body onload='blahForm.blahSelect.selectedIndex=-1'>
<form name=blahForm>
<select name=blahSelect onchange='(this.selectedIndex == 0) ? blah1() : blah2()'>
<option value=1>Run Function 1
<option value=2>Run Function 2
</select>
</form>
</body>

-kaht

banghead.gif
 
Upvote 0 Downvote
Kaht, looks like the perfect solution! will test it out!!!


Kind regards.
 
Upvote 0 Downvote
Hi, i cant figure out how to change the css style when i call a function, can any one help?

this is what i want to apply when i call the function.

var StyleSheet = document.styleSheets[0], rule;
var rule = ( document.all ) ? StyleSheet.rules : StyleSheet.cssRules;
var value = "block" : "none";

for( i=0; i < rule.length; i++ ) {

if( rule.selectorText == selector ) {

rule.style.cssText = "display:" + value + ";";
}
}



Can anyone help?

kindest thanks.
 
Upvote 0 Downvote

Where is "selector" defined... And what is this meant to do:

Code: 
var value = "block" : "none";

?

Incidentally, you can remove the ", rule" from the first line, as you're defining it on the next line anyway.

Dan
 
Upvote 0 Downvote
Sorry Dan, i used to have two checkboxs which called the following function. <script language="JavaScript">

function updateRule( selector, checkbox ) {

var StyleSheet = document.styleSheets[0], rule;
var rule = ( document.all ) ? StyleSheet.rules : StyleSheet.cssRules;
var value = ( checkbox.checked ) ? "block" : "none";

for( i=0; i < rule.length; i++ ) {

if( rule.selectorText == selector ) {

rule.style.cssText = "display:" + value + ";";
}
}
}
</script>

This is one of he checkboxes i am using...

<input type="checkbox" id="checkTableA" onClick="updateRule( '.tableA', this );" name="TableA" checked/>


Does this help?

kindest thanks.
 
Upvote 0 Downvote

If you no longer want to call the function from an onclick event of a checkbox, and instead call it from one of the two functions that kaht has given in his example above, try this.

Change the function declaration from this:

Code: 
function updateRule( selector, checkbox ) {

to this:

Code: 
function updateRule( selector, checkboxValue ) {

remove this line altogether:

Code: 
var value = ( checkbox.checked ) ? "block" : "none";

change this line:

Code: 
rule[i].style.cssText = "display:" + value + ";";

to this:

Code: 
rule[i].style.cssText = "display:" + checkboxValue + ";";

and then you can call your function using:

Code: 
updateRule('selectorStringHere', true);
updateRule('selectorStringHere', false);

Hope this helps,
Dan
 
Upvote 0 Downvote
Dan, thanks for replying. i can understand what you have put but i cant get it to work.

if there are 3 items in the drop down..

Show Table A
Show Table B
Show Both Tables

how would the javascript show the correct table but hide the others?

Sorry for being a pain!
 
Upvote 0 Downvote
Dan, here is an example of what i want to achieve (i dont think it will work though if there are multiple tables with the same name). Is this a better approach?


<script language=JavaScript>
function test1() {
document.getElementById("TableA").style.display = 'block';
document.getElementById("TableB").style.display = 'none';
}

function test2() {
document.getElementById("TableA").style.display = 'none';
document.getElementById("TableB").style.display = 'block';
}
function test3() {
document.getElementById("TableA").style.display = 'block';
document.getElementById("TableB").style.display = 'block';
}
</script>

<form name=form1>
<select name=test onchange='(this.selectedIndex == 0) ? test1() : test2() : test3()'>
<option value=1>Show Table A
<option value=2>Show Table B
<option value=3>Show Both Tables
</select>
</form>


Regards.
 
Upvote 0 Downvote
It is definatley a better approach, yes. However, your onchange event is incorrect - it will not function just by adding extra function calls to the end.

The original solution from kaht was coded to the requirements you gave at the time. If you are now changing those requirements to handle multiple tables, extra values in the dropdown, or "catch all" scenarios, then the code will need to change to reflect that accordingly.

My advice to you would be to sit down, plan your requirements - and most importantly, understand them. If you don't know your own requirements, then no-one else will.

Once you understand your own requirements, asking others for help in coding them will be far easier than giving things to us bit-by-bit (which is extremely frustrating, I assure you).

Hope this helps,
Dan
 
Upvote 0 Downvote
Cheers Dan, i will have a re-think.

Thanks for replying.
 
Upvote 0 Downvote
I think i have got it sussed now, it appears to work to my new spec.

Does anyone know why the code below doesn't work? it works fine calling two functions - not three?

<select name=test onchange='(this.selectedIndex == 0) ? test1() : test2() : test3()'>

Regards.
 
Upvote 0 Downvote

As I said in my previous post, you cannot simply add extra parameters to the end of the ternary operator like that. Doing so would be identical to this [theoretical] syntax:

Code: 
if (this.selectedIndex == 0)
   onchange = test1;
else 
   onchange = test2;
else
   onchange = test3;

which is clearly not valid (having 2 else statements).

This is why I said you needed to rethink your spec - so we could post code that was compatible with that spec. As you haven't posted your new spec (with details of how many items are in your select list, etc), giving you the correct code would be hard to do.

Tell us your new requirements, and I'm sure someone will be able to give you the code to match.

Dan

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

nanbread
  • Locked
  • Question
Sweeping drop-down menus
Replies
0
Views
849
nanbread
nanbread
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
569
Daniel K
Daniel K
Ahmad khalafalla
  • Locked
  • Question
How to listen to 'onclick' event on the document
Replies
1
Views
431
feherke
feherke
TheLazyPig
  • Locked
  • Question
Dropdown (option) using Anguarjs
Replies
0
Views
802
TheLazyPig
TheLazyPig
JPSeo
  • Locked
  • Question
simple SyntaxError: missing ) after argument list error
Replies
2
Views
408
JPSeo
JPSeo

Part and Inventory Search

Sponsor

Back
Top