Display if is selected [Archive] - HTML Forums - Free Webmaster Forums and Help Forums

View Full Version : Display if is selected

stevenoi

07-01-2009, 06:19 AM

Hi, I made a select dropdown, with the follow options :
- Blue
- Red
- White
- Custom.

When Blue, Red or white is selected, nothing will hapen, if custom is selected a new div will show, where you can set you custom collors. So my question is : "How to display a div when a option is selected?

- Steven

coothead

07-01-2009, 08:43 AM

Hi there stevenoi,

here you go...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
#custom {
text-align:center;
background-color:#eef;
}
.hide {
display:none;
}
</style>

<script type="text/javascript">
if(window.addEventListener){
window.addEventListener('load',mytest,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',mytest);
}
}

function mytest(){

obj=document.getElementById('custom');
df=document.forms[0];
df[0][0].selected=true;

df[0].onchange=function() {

if(this.value=='custom') {
obj.className='';
}
else {
obj.className='hide';
}
}
}
</script>

</head>
<body>

<form action="#">
<div>
<select>
<option value="" selected="selected">- options -</option>
<option value="blue">blue</option>
<option value="red">red</option>
<option value="white">white</option>
<option value="custom">custom</option>
</select>
</div>
</form>

<div id="custom" class="hide">custom</div>

</body>
</html>

stevenoi

07-01-2009, 08:49 AM

Thanks, you rock!

stevenoi

07-01-2009, 10:12 AM

I got a problem, selected="selected" don't work...

coothead

07-01-2009, 10:31 AM

Hi there stevenoi,

What do want selected="selected" to do?

Are you planning to submit the select value?

stevenoi

07-01-2009, 11:06 AM

Yes, when I choose , for example : white, and submit the list display the first option ( blue ), but if I look in the source, white is selected..

coothead

07-01-2009, 11:18 AM

Hi there stevenoi,

I used it in the javascript to make the select return to the original state on page refresh.
But forgot to cancel it onchange. :o

Try it like this...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
#custom {
text-align:center;
background-color:#eef;
}
.hide {
display:none;
}
</style>

<script type="text/javascript">
if(window.addEventListener){
window.addEventListener('load',mytest,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',mytest);
}
}

function mytest(){

obj=document.getElementById('custom');
df=document.forms[0];
df[0][0].selected=true;

df[0].onchange=function() {
df[0][0].selected=false;
if(this.value=='custom') {
obj.className='';
}
else {
obj.className='hide';
}
}
}
</script>

</head>
<body>

<form action="http://www.google.com/"> 
<div>
<select name="foo">
<option value="blue" selected="selected">blue</option>
<option value="red">red</option>
<option value="white">white</option>
<option value="custom">custom</option>
</select>

<input type="submit">

</div>
</form>

<div id="custom" class="hide">custom</div>

</body>
</html>

stevenoi

07-01-2009, 11:43 AM

Thanks for your help but it still doesn't work :( But did you only changed the javascript code?

coothead

07-01-2009, 11:53 AM

Hi there stevenoi,

the last example that I posted submits correctly. :agree:

Are you using some modification that I am unaware of?

stevenoi

07-01-2009, 12:08 PM

I use your script on a theme options page for a wordpress theme, and I can submit things withouth giving the form an action, I also use other options, and the javascript is in a file, and the css also...I think that's all :P

coothead

07-01-2009, 12:19 PM

Hi there stevenoi,

do you have anything that I can test, a site link or the page code?

stevenoi

07-01-2009, 12:27 PM

This is the code that I use

<form method="post" action="#">

<div class="tab">
<h3><?php echo $value['name']; ?></h3>
<div class="select">

<select style="width:400px" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>">
<?php foreach ($value['options'] as $option) { ?>
<option value="<?php echo $option; ?>"<?php if ( get_settings( $value['id'] ) == $option) { echo ' selected="selected"'; }?>><?php echo $option; ?></option>
<?php } ?>
</select>
</div>

<div id="custom" class="hide">
Custom text
</div>
</div>
</div>

<div class="bottom-save">
<p class="submit">
<input name="save" type="submit" value="Save changes" />
<input type="hidden" name="action" value="save" />
</p>
</div>

</form>

coothead

07-01-2009, 12:37 PM

Hi there stevenoi,

can I see the generated code rather than the php?

stevenoi

07-01-2009, 12:55 PM

<form method="post" action="#">

<div class="tab">
<h3>Layout style</h3>
<div class="select">

<select style="width:400px" name="layout-style" id="layout-style">
<option value="blue">blue</option>
<option value="red">red</option>
<option value="white">white</option>
<option value="custom" selected="selected">custom</option>
</select>
</div>

<div id="custom" class="hide">
Custom text
</div>

</div>

<div class="bottom-save">
<p class="submit">
<input name="save" type="submit" value="Save changes" />
<input type="hidden" name="action" value="save" />
</p>

</form>

coothead

07-01-2009, 01:16 PM

Hi there stevenoi,

thanks for the code, I can now see what you require. :agree:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
#custom {
text-align:center;
background-color:#eef;
}
.hide {
display:none;
}
</style>

<script type="text/javascript">
if(window.addEventListener){
window.addEventListener('load',showDiv,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',showDiv);
}
}

function showDiv(){

obj=document.getElementById('custom');
df=document.forms[0];
df[0][3].selected=true;

df[0].onchange=function() {
df[0][3].selected=false;
if(this.value=='custom') {
obj.className='';
}
else {
obj.className='hide';
}
}
}
</script>

</head>
<body>

<form action="http://www.google.com/"> 

<div class="tab">

<h3>Layout style</h3>

<div class="select">

<select style="width:400px" name="layout-style" id="layout-style">
<option value="blue">blue</option>
<option value="red">red</option>
<option value="white">white</option>
<option value="custom" selected="selected">custom</option>
</select>

</div>

<div id="custom" class="hide">Custom text</div>

</div>

<div class="bottom-save">

<p class="submit">
<input name="save" type="submit" value="Save changes">
<input type="hidden" name="action" value="save">
</p>

</div>

</form>

</body>
</html>

stevenoi

07-01-2009, 01:40 PM

Thanks again, but I don't want to select only Custom ( that's how it looks like on my page ), that's just an example.

stevenoi

07-01-2009, 01:45 PM

Everything works, the only problem is that the select menu won't show the selected option but the first option ( blue ) if the form is submitted.

coothead

07-01-2009, 02:04 PM

Hi there stevenoi,

I am getting hot and tired, and don't know what you really want. :confused:
Try this then...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
#custom {
text-align:center;
background-color:#eef;
}
.hide {
display:none;
}
</style>

<script type="text/javascript">
if(window.addEventListener){
window.addEventListener('load',showDiv,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',showDiv);
}
}

function showDiv(){

obj=document.getElementById('custom');
df=document.forms[0];

df[0].onchange=function() {

if(this.value=='custom') {
obj.className='';
}
else {
obj.className='hide';
}
}
}
</script>

</head>
<body>

<form action="http://www.google.com/"> 

<div class="tab">

<h3>Layout style</h3>

<div class="select">

<select style="width:400px" name="layout-style" id="layout-style">
<option value="blue">blue</option>
<option value="red">red</option>
<option value="white">white</option>
<option value="custom">custom</option>
</select>

</div>

<div id="custom" class="hide">Custom text</div>

</div>

<div class="bottom-save">

<p class="submit">
<input name="save" type="submit" value="Save changes">
<input type="hidden" name="action" value="save">
</p>

</div>

</form>

</body>
</html>

stevenoi

07-01-2009, 02:17 PM

Yes that worked!

coothead

07-01-2009, 02:27 PM

At last, this old man can get some zzzzzzz's in. :lol: