Rails JS условно отображать Div на основе радио-кнопки выбирается

Question

$('.domestic_select, .abroad_select').on('click', function(){ 
    alert($(this).val()); 
    if($(this).val() == "true") { 
     $('#customer_goods').show(); 
     $('#state_field').show(); 
     $('#country_field').hide(); 
     $('#change_resident').show(); 
    } 
    else { 
     $('#change_resident').hide(); 
     $('#customer_goods').hide(); 
     $('#country_field').show(); 
     $('#state_field').hide(); 
    } 
    }); 

.fieldset 
     .row 
      .col-sm-12 
      = f.label :pin_code,"Pin Code", class: "col-sm-3 control-label text-right" 
      = f.text_field :pin_code, autofocus: true, class: "col-sm-3" 
      %div{id: 'state_field'} 
      = f.label :state,"State", class: "col-sm-3 control-label text-right" 
      = f.select(:state, options_for_select(State.collect_state),{},{class: "selectpicker col-sm-3", id: "myselect", prompt: "Select State", "data-live-search": "true"}) 
      %div.hide{id: 'country_field'} 
      = f.label :country,"Country", class: "col-sm-3 control-label text-right" 
      = f.select(:country, Country.collect_country,{}, {class: "selectpicker add_class_country dropdown_country col-sm-3", title: "select country", "data-live-search": "true"}) 

     %br 

Здесь я спрятал страну DIV, так что состояние поля отображается на начальном этапе. при нажатии на вариант за границей должен отображаться «country div», а «state div» должен быть скрыт

Но то, что у меня есть, и поля штата и страны скрыты после выбора опции за границей.

Answer 1

Как вы скрыли #country_field изначально. display: none;? Вы должны убедиться, что используете дисплей: нет и не видимость: нет; или какой-либо другой стиль, используемый jquery, отображает: none/block; скрыть и показать.

$('.domestic_select').on('change', function(){ 
    if($(this).is(':checked')) { 
    $('#customer_goods, #state_field, #change_resident').removeClass('hide'); 
    $('#country_field').addClass('hide'); 
    } 
}); 

$('.abroad_select').on('change', function(){ 
    if($(this).is(':checked')) { 
    $('#customer_goods, #state_field, #change_resident').addClass('hide'); 
    $('#country_field').removeClass('hide'); 
    }; 
});