Question

我有一个select，里面有2个选项，我的目标是根据选择的选项显示/隐藏html元素。没有空选项，因此始终选择“默认”或“自定义”。

为此，我正在使用jquery：

  $(document).ready(function(){
    $('.template-type').on('change', function() {
      if ( this.value == 'default') {
        $("#default_template").show();
        $("#custom_template").hide();
      } else {
        $("#default_template").hide();
        $("#custom_template").show();
      }
    });
  });

但是当我重新加载页面时，无论保存了什么选项，两个html元素都再次可见，并且控制台日志this.options告诉我它是undefined，但是重新加载后选择的选项与该选项匹配保存之前。只有当我再次选择其他选项时，它才能正常工作。

这是一个选择，即Symfony ChoiceType字段，以防万一需要：

    case 'email_category':
        $attrFields = array('class' => 'form-control template-type');
        $formFieldType = ChoiceType::class;
        $optionFields = array('choices'  => array('Default' => 'default', 'Custom' => 'custom'), 'choices_as_values' => true, 'label' => 'Type of template used:');
        break;

Answer 1

假设您正在设置selected服务器端，则可以在声明更改处理程序之后触发更改事件。

$(document).ready(function() {
  $('.template-type').on('change', function() {
    if (this.value == 'default') {
      $("#default_template").show();
      $("#custom_template").hide();
    } else {
      $("#default_template").hide();
      $("#custom_template").show();
    }
  // trigger the change on page load
  }).change();
});

默认选择选项值未定义

1 个答案: