最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - show div depending on select option - Stack Overflow

programmeradmin12浏览0评论

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())
Share Improve this question edited Jan 2, 2012 at 15:08 pad 41.3k7 gold badges94 silver badges168 bronze badges asked Nov 6, 2009 at 23:15 LeighLeigh 11 silver badge1 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

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()">
发布评论

评论列表(0)

  1. 暂无评论