[PHP/Ajax] ComboBox "SelectedItem change" event

[Elagizy 0]

I'm trying to show a <div> once I select a specific item in a combobox without reloading the php page.

<Select NAME="cboAct" style="width:200px;">
	<Option VALUE="Item1">1</option>
	<Option VALUE="Item2">2</option>
	<Option VALUE="Item3">3</option>
</Select>

Assuming that Item3 should show the specific <div> without reloading the page.

Could you please tell me how to do that, posting a code will be very helpful to me as I almost know nothing about Ajax and very little knowledge about php.

Thanks for any help :)

Edit: If it could be done in Java Script, please help me...

[Mathachew 149]

You could go with an AJAX solution or just JS. If you want to do AJAX, it'll require downloading the content as the options are selected; with just JS, all the HTML will be loaded and displayed accordingly using CSS (initially).

For JS, based on the selected item, you would display a specific div while hiding the other ones.

Are you using a JS framework?

[Elagizy 0]

I'm not using JS framework.....

but I think I little figure out how it will look like, but the code still doesn't work :(

<Option VALUE="Item3" onChange="Show();">3</option>

Where Show() is a JS function defined, I don't know how to deal with a combobox throught the function, how could I tell it:

If cboAct.Selecteditem = "Item3" then MyDiv.visible = false ........ something like that

I still didn't tested if onChange event works with each item not for the entire combobox.

[The_Decryptor 1,105]

Put the onChange call with the select element, object elements don't really "change", but select elements do.

[Elagizy 0]

Thanks all for your help, I managed to do it finally, It will be as follows :)

<script language="JavaScript"><!--
function T1(object) {
if (object == "Item3")
	{
	document.getElementById('myId').style.visibility = 'visible';
	}
	else
	{
	document.getElementById('myId').style.visibility = 'hidden';
	}
}
//--></script>

"myId" is an ID of the div, I can put in it whatever I want (e.g. textbox, button) , it's like a panel for child controls, so once it's hidden, all childs will be hidden as well.

<Select NAME="cboAct" onChange="T1(this.value);" style="width:200px;">

T1 is function and "this.value" gets the current selected item.

Thanks again

[+mrbester 204]

When a <select> option is chosen then strictly the value property of the <select> isn't assigned (but might be to allow for "shorthand" script such as yours) but the selectedIndex property is. You then interrogate the options object in the <select> to get the value (or text) of the actual selected option.

That code looks like something a IE-centric IDE would spew out BTW...

<script type="text/javascript">
function showPanel(sel){
	var el=document.getElementById('myId');
	el.style.visibility=(sel.options[sel.selectedIndex].value=='Item3')?'visible':'hidden';
}

<select name="cboAct" style="width:200px;" onchange="showPanel(this);">
	<option value="Item1">1</option>
	<option value="Item2">2</option>
	<option value="Item3">3</option>
 </select>

FWIW: <select />s aren't comboboxes. Comboboxes are extended <select />s that allow a text entry as well as selecting from a list (the dynamic Google search is a commo example). The Microsoft (and others) terminology for a <select> is "dropdown".