javascript - show div depending on select option - Stack Overflow

admin管理员组

文章数量:1430407

Oh help, I've tried it a million different ways yet it still does not work: If you select update or final from a select/option box, it should show the div that has an input field in it. It only does what the default shows in the switch statement. Of course, it's only after a selection is made that I want it to determine whether it shows the input field or not.

in head section...

$(document).ready(function(){  
$('#needfilenum').hide();  
var optionValue = $("#needtoshow").val();  

switch (optionValue)  
{  
case 'update':  
$("#needfilenum").show();
break;  

case 'final':  
$("#needfilenum").show();  
break;  
default:  
$("#needfilenum").hide();  
break;  
    }
});
//});

'<select id="needtoshow" >  
<option id="dfaut" value="0">Select Something</option>
<option id="update" value="update">Update</option>
<option id="final" value="final">Final</option>
<option id="allergy"value="allergy">Vegan</option>  
</select>
<div id="needfilenum"  style="background:#f00;">  
<input type="text" name="wharever"   />
</div>  

I can change the default on the switch and that seems to dictate what it shows also tried

//  $("#needtoshow").change(function() {  

//      switch ($(this).val())

Oh help, I've tried it a million different ways yet it still does not work: If you select update or final from a select/option box, it should show the div that has an input field in it. It only does what the default shows in the switch statement. Of course, it's only after a selection is made that I want it to determine whether it shows the input field or not.

in head section...

$(document).ready(function(){  
$('#needfilenum').hide();  
var optionValue = $("#needtoshow").val();  

switch (optionValue)  
{  
case 'update':  
$("#needfilenum").show();
break;  

case 'final':  
$("#needfilenum").show();  
break;  
default:  
$("#needfilenum").hide();  
break;  
    }
});
//});

'<select id="needtoshow" >  
<option id="dfaut" value="0">Select Something</option>
<option id="update" value="update">Update</option>
<option id="final" value="final">Final</option>
<option id="allergy"value="allergy">Vegan</option>  
</select>
<div id="needfilenum"  style="background:#f00;">  
<input type="text" name="wharever"   />
</div>  

I can change the default on the switch and that seems to dictate what it shows also tried

//  $("#needtoshow").change(function() {  

//      switch ($(this).val())

• javascript
• jquery
• select
• hide
• show

Share Improve this question Follow edited Jan 2, 2012 at 15:08 pad 41.3k77 gold badges9494 silver badges168168 bronze badges asked Nov 6, 2009 at 23:15 LeighLeigh 111 silver badge11 bronze badge 4

• show your code using code format – Anirudha Gupta Commented Nov 6, 2009 at 22:52
• well i thought i followed the directions to post i'll repost – Leigh Commented Nov 6, 2009 at 23:00
• 1 Notice: you can't give id's to <option> elements, they only get selected, value, and label... see w3 – Sinan Commented Nov 7, 2009 at 0:00
• thank you for the help. that was a last ditch hope... saw it and tried it! – Leigh Commented Nov 7, 2009 at 0:13

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

If you want to have the div show and hide when the drop-down changes, you need to bind to the change event, for example:

$(document).ready(function() {
  $('#needfilenum').hide();

  $('#needtoshow').bind('change', function() {
    var optionValue = $("#needtoshow").val();

    switch (optionValue)
    {
      case 'update':
      case 'final':
        $("#needfilenum").show();
        break;

      default:
        $("#needfilenum").hide();
        break;
    }
  });
});

In your code, the switch statement runs only once when the page first loads.

You probably want to bind an event listener on your select box. (change event) So you would have something along the lines of:

$("#oldfilenum").change(function() {
  var optionValue = $(this).val();
  switch (optionValue) { 
    case 'update': 
      $("#needfilenum").show(); 
      break; 
    case 'final ': 
      $("#needfilenum").show(); 
      break; 
    default: 
      $("#needfilenum").hide(); 
  } 
};

Try something like this:

var selectBox = $("#oldfilenum"), magicDiv = $("#needfilenum");
selectBox.bind("change", function() {
    var val = this.value;
    if (val === "update" || val === "final") {
        magicDiv.show();
    } else {
        magicDiv.hide();
    }
});

Of course you can use switch instead, or have a [] of acceptable values and do it.indexOf(val) > -1 or whatever.

As Victor mented on another answer, change fires on blur in MSIE, so you may want to use another event if that is an issue, perhaps mouseup.

You should look into the change() event. Attach that to your <select> and then perform your logic.

Your checking function runs only once, and not every time you change the select field. You need to put an onchange handler into the select field:

<select id="needtoshow" onchange="your_function_name_here()">

本文标签： javascriptshow div depending on select optionStack Overflow