jQuery检查下拉选择是否等于数组中的项

时间:2016-02-23 16:19:34

标签: php jquery arrays

我有以下代码(它的jquery但使用php添加动态变量):

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();
            }
    });
});

这样做的目的是检查下拉菜单的值并根据选择显示/隐藏元素。目前,代码设计为在下拉选项==&#39;选择&#39;时工作,但是,我想在这里添加一个结果数组,基本上,如果下拉值等于&#39;选择&# 39;,&#39;复选框&#39;或者&#39; radio&#39;。

如何通过编写数组并根据它检查值来实现这一目标?

1 个答案:

答案 0 :(得分:1)

首先,不要在init中重复你的代码然后在更改中(至少,它看起来很重复,很难用所有的php tbh告诉)。

接下来,将这些值与比较分开,这也可以更容易地查看正在进行的操作:

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();
    });
});

现在有问题的部分只是if (val == 'select'),您可以将其更改为:

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