JQuery :: Show/hide DIV Elements Depending On Select Value?
Aug 4, 2010
how one can show and hide a div element using a pulldown menu. i need the different selections in the pulldown menu to show hidden DIV elements on the page. this will be used in a system where i only have access to the template, so the only approach i can use is jquery. how to change it for the specific selectors i need.
<!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>
I have the following code that generates two dropdown boxes in a form, but I would like for the second to be hidden unless the first has 'Software problem' selected. Is it possible to do this?
I have a page I am working and I am having some trouble with: I need to show and hide areas based on a radio selection. I initally started using the show / hide feature in Jquery but the problem is the elements need to be removed but then put back if the user selects the radio buttonagain as it has form elements that have validaion on them. The validation is still trying to validate the form elements becuase they are still on the page but just not showing. This is the radio group the user makes the selection from:
I have a multipage form. I can put data entered in hidden form elements from previous pages. I want to show or hide table rows depending on this data value. For example, I collect a list of names in first form, but if some names are blank I dont want to show the table row associated with that name to collect more data. I have seen loads of code to toggle rows but cant find any which shows me how to toggle on a variable.
I want to get javascript to show or hide a row in a table depending on whether a value is held by a variable collected in a mulitple part formmail. If only 1 adult fills in their name on the earlier form there is no need to show the row which asks him to agree to membership on a later form page. This is what Ive got so far<form name="frm3" method="post" action="bookingscript.php">
I have a big form which I'm tidying up by only showing elements when they become relevant, based on the currently selected input (eg to only show an option for 'waist size' when garment type 'jeans' has been selected). I've done this many times, and probably used a different approach each time, so I just wanted to see what other people do. It's currently along these lines: "If a particular option is selected, then show this element, otherwise hide it".
Code: //the onclick handler function checkViewType() { //go through radio inputs in the cell and check what's clicked document.getElementById('supplierOptions').style.display=radioCollection.supp.checked?"":"none"; document.getElementById('subCatOptions').style.display=radioCollection.subcat.checked?"":"none"; document.getElementById('subCatTimeOptions').style.display=radioCollection.subcat_sumtype_time.checked?"":"none"; document.getElementById('subCatSumOptions').style.display=radioCollection.subcat_sumtype_sum.checked?"":"none"; document.getElementById('subcat_weekmonth_span').innerHTML=radioCollection.subcat_time_week.checked?"week":"month"; }
But it's a big form, with lots of nested options, and some elements can be triggered visible by several different options. So I'm looking for an elegant way to handle this without a million if..elses. Perhaps an array of element ids and which elements are allowed visible when that's selected.
I am maintaining a site which is written in ASP. Now i have to create some new pages.
In one page we have a table with many rows. Now, I want to enable or disable(showing and hiding also) 2 rows of this table depending upon the value selected by the user from a drop down list.
I want <select #2> to show a list depening on what the user choose for <select #1>. The tricky part is, not allowing the user to see what <select #2> lists are. Maybe fade it out untill they pick something from <select #1>.
oving jQuery at the moment, and have sort of hit a hiccup with showing and hiding specific elements with the same class. My idea is, what if I wanted to add a little button to show and hide the contents of a specific comment on a forum post, or blog, whatever. This would be easily done with id's but I'd like to just apply a class to each one of them and allow them to hide their contents. Here is the javascript and html as an example of what I am talking about.
i've got a question. I would like to show childlists in a sidebar which have less than 2 elements in it, and hide childlists which have more 4 elements in it.this is what i got til now:
I have a select box that has four options. It has a single div below it with some news text in. When I select say item 2 in the dropdown I would like the div to change to another one, basically swap out the div based on the select option. I have been trying to do this using jQuery but no luck.
And a corresponding text_field input element div I'd like to display based on which radio button the user selects:
When the page loads, I'd like to see:
When the user clicks on a (different) radio button, or clicks one for the first time, I'd like whichever div is currently showing to be hidden, and the newly selected one to be shown.
Right now I have jQuery code at the bottom of my page that looks like this:
For each of the four options.
When the page loads, the correct div is shown, and when I select a new button, the new div is shown, but the already showing one isn't hidden.
I've read some posts that suggest using change() instead of click(), but others indicate that's problematic in IE.
i've been breaking my brain about this issue for a bit now, so here is my question.
I have a SELECT with various OPTIONS
<select id="myselect" name="myselect"> <option value='$variable' >1 - variable ammount of this option</option> <option value='$variable' id="showOption">2 - gets added once at the end of the SELECT</option>
I have some nested lists that I am trying to clean up. What I am wanting to do is to be able to click an item in the outermost list (the catagory), and have it show the appropriate inner list (the subcatagory). I have it working in FireFox, but IE is not working. Code:
I'm working on a form that hides/shows certain elements when certain things are selected.
In the file I'm working with, when you select the "problem" radio button, the "problem" drop down menu appears. When you select the "request" radio button, the "request" drop down menu appears
Now, when I try to make a selection from the "problem" drop down menu, nothing appears like it should (Computer, Monitor, Printer, and AVPeriph are the active ones). Everything stays hidden.
With each of those 4 selections, a table element should appear. Any ideas to what the problem is? I'm assuming it's the javascript since I don't know it too well.
I'm trying to figure out a small javascript question. I have certain elements in my pages that I want to show or hide if the user has javascript disabled. [code]...
i have several programmatically generated DIVSectionsin my WebApplication. And i have for each of these DIVSectiona RadioButton Group. When the user now checks the RadioButton of the associated DIV-Section theSectionshould be Shown. And when he checks the other RadioButton the DIVSectionshould be hidden.How could a jQuery Function and a call look like, which does the above action?Here my sample:
I have a page that is generated using php. Below, the pdf newsletter for each month is embedded directly into the page. What I want to do is have some javascript that when the link for a month is clicked, the embedded pdf expands below and when the user clicks on another month, that newsletter is hidden then the one they clicked on gets displayed; so only one newsletter is displayed at a time.
Using jQuery, the hide show part is easy. I need to show or hide a single section of a form based on the value of a select box. More specifically, if the select box is one of 30 countries, then show, else hide.
I recently learned that the <option> tags can not use the onclick attribute inside of IE.This works great for firefox, but sadly not a single version of internet explorer supports it (from what I am told via countless Google searches).I have been modifying my attempit at a solution to use the <select> tag with the attribute onchange. Maybe I am casing this wrong, or not seeing a solution as the below code does not operate in any browser, and no errors are reported back through firebug or IE.Excuse my sloopy attempt at {smarty tags} this script is written in a bunch of PHP object->vales and to save space cored the issue down to it's basics.On change of the select box, the value="5-28" is sent to javascript showBox to split the number away from the id_trips and only focus on the locations (the number before the '-' . IF the location matches the switch value then the box should show / hide or value change. The IDs are all correct I just think that there is a ' or a " or something off as I am not a javascript expert.
my SQL return values <code class="php"> //PHP VARIABLES from QUERY sample loop 1
I'm doing a page w/lots of divs that I set to visibile or hidden dynamically using getElementById.. the divs are all forms... sometimes elements in a hidden form show thru on a visible form.. how can I fix this..
