• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

[PHP/Ajax] ComboBox "SelectedItem change" event

Question

Elagizy    0

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

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

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...

Share this post


Link to post
Share on other sites

5 answers to this question

Recommended Posts

  • 0
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?

Share this post


Link to post
Share on other sites
  • 0
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.

Share this post


Link to post
Share on other sites
  • 0
The_Decryptor    1,105

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

Share this post


Link to post
Share on other sites
  • 0
Elagizy    0

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

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

"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.

&lt;Select NAME="cboAct" onChange="T1(this.value);" style="width:200px;"&gt;

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

Thanks again

Share this post


Link to post
Share on other sites
  • 0
+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...

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

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

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".

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.