jQuery check if dropdown selection equals item in an array

Question

I have the following code (it's jquery but uses php to add in the dynamic variables):

jQuery(document).ready(function($){ 
    var arr = [ 'select', 'checkbox', 'radio' ];
    var thisForm = 'select#widget-layers-widget-form_builder-<?php echo $this->number; ?>-form_builders-<?php echo esc_attr( $item_guid ); ?>-input_type';

    if ($('select#widget-layers-widget-form_builder-<?php echo $this->number; ?>-form_builders-<?php echo esc_attr( $item_guid ); ?>-input_type option:selected').val() == 'select'){
        $('#select-options-<?php echo esc_attr( $item_guid ); ?>').show();
        }else{
        $('#select-options-<?php echo esc_attr( $item_guid ); ?>').hide();
        }

    $(thisForm).change(function(){
        if ($('select#widget-layers-widget-form_builder-<?php echo $this->number; ?>-form_builders-<?php echo esc_attr( $item_guid ); ?>-input_type option:selected').val() == 'select'){
            $('#select-options-<?php echo esc_attr( $item_guid ); ?>').show();
            }else{
            $('#select-options-<?php echo esc_attr( $item_guid ); ?>').hide();
            }
    });
});

The purpose of this is to check the value of a dropdown menu and show/hide an element based on the selection. Currently, the code is designed to work if the dropdown selection == 'select', however, I want to add an array of results here, essentially, if the dropdown value is equal to 'select', 'checkbox' or 'radio'.

How can I achieve this by writing an array and checking the value against it?

api.jquery.com/jQuery.inArray or developer.mozilla.org/en/docs/Web/JavaScript/Reference/… — billyonecan
– billyonecan, Commented Feb 23, 2016 at 16:26
Thanks @billyonecan - so i've added my array var, how do I now reference it in my if statement? — Sam Skirrow
– Sam Skirrow, Commented Feb 23, 2016 at 16:30

fdomn-m · Accepted Answer · 2016-02-23 16:57:11Z

1

First, don't repeat your code in the init and then in the change (at least, it looks repeated, hard to tell with all the php tbh).

Next, get the values separate from the comparison, this also makes it easier to see what's going on:

var arr = [ 'select', 'checkbox', 'radio' ];
var thisForm = 'select#widget-layers-widget-form_builder-<?php echo $this->number; ?>-form_builders-<?php echo esc_attr( $item_guid ); ?>-input_type';

function showHideSelect() {
    var val = $(thisFrom + ' option:selected').val();
    var select = $('#select-options-<?php echo esc_attr( $item_guid ); ?>')

    if (val == 'select'){
        select.show();
    } else {
        select.hide();
    }
}

jQuery(document).ready(function($) { 
    showHideSelect();

    $(thisForm).change(function(){
        showHideSelect();
    });
});

Now the part in question is simply if (val == 'select'), which you can change to:

if (arr.indexOf(val) >= 0)
    select.show();
else
    select.hide();

answered Feb 23, 2016 at 16:57

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

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

2 Comments

Sam Skirrow Over a year ago

This is a great answer, thanks. Just out of curiosity, why shouldn't you repeat code in the init and then in the change?

fdomn-m Over a year ago

In summary: DRY - Don't Repeat Yourself. If you have the same code twice, there's twice as much chance of there being a mistake. If you fix a mistake in one of them or make a change to the action, but forget (or don't know about the other places) then you introduce bugs/don't fix bugs. It also makes it clear that they are supposed to do the same thing - perhaps on click you want a transition effect, but not on load - by having a single method, it's obvious they should do the same thing, whereas the code in the question as-is it would not be clear if it's a bug or intentional.

Collectives™ on Stack Overflow

jQuery check if dropdown selection equals item in an array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related