0

I am trying to stream-line some code that I believe is a little sloppy. Basically a script that checks to see the value of a select box and shows or hides a div based on the value selected. I want to check the value on load as well as on change. Is there a cleaner way to do this?

// Required items  
 $(document).ready(function(){  
 if($("#credentials").attr("selectedIndex") == "None") {
    $('#CDiv').show();
 }else{
     $('#CDiv').hide();
   }
 $("#credentials").change(function(){
    if ($(this).val() == "None" ) {
        $('#CDiv').show();     
    } else {
        $('#CDiv').hide();      
        }  
    });    
});

I appreciate any help with this. I am still a little green on jQuery. Thanks!

Chris Pilie
  • 451
  • 2
  • 7
  • 21

1 Answers1

3

selectedIndex is a property not an attribute and it doesn't return "None". If you want to read it's value you should use prop method instead. That being said you can trigger the change event instead of using if statement. By triggering the event your change handler is executed once on DOM ready:

$("#credentials").on('change', function() {
    $('#CDiv').toggle( this.value === 'None' ); 
}).change();
Ram
  • 143,282
  • 16
  • 168
  • 197