How to optimize this jQuery code?

Question

Been tinkering with some code regarding setting the visibility of a drop down based on the selected value of another dropdown.

This code is for the page load:

     $(document).ready(function() {
            if ($("#<%=ddlCoverage.ClientID %>").val()  == 'Basic') {
                $('#CoverageType').show();
            }
            else{
                $('#CoverageType').hide();
            }
        });

Here is the the other piece that I use for the changing of the dropdown.

$("#<%=ddlCoverage.ClientID%>").change(function() {
                $('#CoverageType')[($(this).val() == 'Basic') ? 'show' : 'hide']()
            });

Is there a better way to write this?

ternary conditional operator can make it in one line though make hard to read — Khurram Ijaz
– Khurram Ijaz, Commented Jun 16, 2011 at 16:46

js1568 · Accepted Answer · 2011-06-16 16:47:25Z

9

http://api.jquery.com/toggle/

$('#CoverageType').toggle($("#<%=ddlCoverage.ClientID %>").val()  == 'Basic'); //true or false

answered Jun 16, 2011 at 16:47

js1568

7,0322 gold badges30 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

js1568 · Accepted Answer · 2011-06-16 17:07:52Z

1

If you want to toggle elements' visibility based on the selection of a drop-down, you'll also need to change the rest of you code a little:

$(function()
{
  $("#<%=ddlCoverage.ClientID %>").change(function()
  {
    $('#CoverageType').toggle($(this).val()  == 'Basic');
  });
});

This way, it'll trigger every time the drop down menu's value is changed as opposed to once when the pages loads. If you only want it when the page loads, why don't you just set it programatically in your ASP/PHP instead of JavaScript?

edited Jun 16, 2011 at 17:07

js1568

7,0322 gold badges30 silver badges47 bronze badges

answered Jun 16, 2011 at 17:00

Francois Deschenes

25.1k4 gold badges67 silver badges61 bronze badges

3 Comments

JAAulde Over a year ago

+1 - Good points, and great code addition based on them. :) Please do see the edit to my answer, however, for how I would write your version.

Todd Over a year ago

The dropdown is preseleetced programatically but will only show the second div if the first drop down has 'Basic' selected.

Francois Deschenes Over a year ago

@chopps - If it's set programmatically, why don't you just programmatically hide the DIV instead of using JavaScript?

JAAulde · Accepted Answer · 2011-06-16 17:19:27Z

It's not necessarily optimized (although it's no slower either), but this is the way I'd write it:

( function( ddlCoverageClientID )
{
  $( function()
  {
    $( '#CoverageType' ).toggle( $( '#' + ddlCoverageClientID ).val() === 'Basic'  );
  } );
}( '<%=ddlCoverage.ClientID %>' ) );

I prefer to inject dynamic server side langues via IIFE in order to keep my JS more readble (to me anyway)
I prefer the $( function(){} ); shortcut to $( document ).ready( function(){} );
I prefer to toggle with a BOOL rather than check a BOOL and then call show or hide

EDIT:

I would modify Francois Deschenes's excellent code, though. Note that I cache the return of $( '#CoverageType' ) rather than run it every time the select changes.

( function( ddlCoverageClientID )
{
  $( function()
  {
    var $CoverageType = $( '#CoverageType' );

    $( '#' + ddlCoverageClientID ).change( function()
    {
      $CoverageType.toggle( $( this ).val() === 'Basic' );
    } );
  } );  
}( '<%=ddlCoverage.ClientID %>' ) );

Collectives™ on Stack Overflow

How to optimize this jQuery code?

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related