使用jquery检查是否选中了特定的下拉选项，如果选中，则启用/显示隐藏/禁用的下拉框

Question

我将数据从数据库表直接加载到表单的下拉框中。我正在尝试检查页面加载是否在此框中设置了特定值，如果是，我想启用另一个默认情况下禁用和隐藏的下拉框。

我正在使用Chronoforms v5创建表单(joomla)，我有设置事件，如果在第一个下拉框中选择了特定值，则启用并显示第二个下拉框，反之，如果在第一个下拉框中没有选择任何值，或者不是我想要的值，我将禁用并隐藏第二个下拉框。但这些事件只有在用户主动更改第一个下拉框中的值后才会发生。我需要的事件发生在页面加载以及。

Chronoform的javascript是

function chronoforms_fields_events(){

    $(':input[name="custom"]').on('change', function(){
        if($(this).val() == 'United_States'){
            $(':input[name="state"]').prop('disabled', false);
        }
    });

    $(':input[name="custom"]').on('change', function(){
        if($(this).val() == 'United_States'){

            if($(':input[name="state"]').closest('.gcore-subinput-container').length > 0){
                $(':input[name="state"]').closest('.gcore-subinput-container').show();
                }else if($(':input[name="state"]').closest('.gcore-form-row').length > 0){
                $(':input[name="state"]').closest('.gcore-form-row').show();
            }

        }
    });

    $(':input[name="custom"]').on('change', function(){
        if($(this).val() != 'United_States'){

            if($(':input[name="state"]').closest('.gcore-subinput-container').length > 0){
                $(':input[name="state"]').closest('.gcore-subinput-container').hide();
                }else if($(':input[name="state"]').closest('.gcore-form-row').length > 0){
                $(':input[name="state"]').closest('.gcore-form-row').hide();
            }

        }
    });

    $(':input[name="custom"]').on('change', function(){
        if($(this).val() != 'United_States'){
            $(':input[name="state"]').prop('disabled', true);
        }
    });

    $(':input[name="custom"]').on('click', function(){
        if($(this).prop('checked')){
            $(':input[name="state"]').prop('disabled', false);
        }
    });
}
chronoforms_fields_events();

我现在将这个javascript添加到HTML (呈现表单)之前，但它不起作用

 function validatecountry(){
 if ($("#custom").prop("selectedIndex", 'United_States')){
          $(':input[name="state"]').prop('disabled', false);
    if($(':input[name="state"]').closest('.gcore-subinput-container').length > 0){
                     $(':input[name="state"]').closest('.gcore-subinput-container').show();
                }else if($(':input[name="state"]').closest('.gcore-form-row').length > 0){
                $(':input[name="state"]').closest('.gcore-form-row').show();
            }

 }
 }
 validatecountry();

任何帮助都将不胜感激。

Answer 1

如果您在表单呈现之前调用此函数，$("#custom")、$('input[name="state"]')等将不会返回任何内容&因此您的代码将无法工作。将调用添加到就绪事件中：

$(document).ready(function() {
  validatecountry();
}

对于问题的第一部分，您可以在DOM就绪后手动触发对输入字段的更改，这将调用更改例程：

$(document).ready(function() {
  $('input[name="custom"]').trigger("change");
}