Hello, tell me, please, what is my joint. Here is a test page . There is a choice of car. After selecting a brand, a model selection is shown. In theory, after choosing a model, the choice of the year should be shown, but for some reason the year remains disabled. Why is this happening?

Here is the code:

function selectAuto(classSelect, pathJson, firstOption) { $('select.' + classSelect).find('option').remove(); $('select.' + classSelect).append( "<option>" + firstOption + "</option>" ); $.getJSON(pathJson, function (data) { $.each( data, function( key, val ) { $('select.' + classSelect).append( "<option>" + val + "</option>" ); }); }); setTimeout(function() { $('.tire-selection-select.' + classSelect).attr('disabled', false).trigger('refresh'); }, 100) }; $('.jq-selectbox.select-mark .jq-selectbox__dropdown li:not(:first-child)').on('click', function(){ selectAuto('select-model', 'js/json/models.json', 'Модель'); }); $('.jqselect.select-model li:not(:first-child)').on('click', function(){ selectAuto('select-year', 'js/json/year.json', 'Год'); });
  • The year is not disabled, not filled with data. - KAGG Design
  • It is disabled. The function simply does not work for disabled to go away + loading from JSON does not work - Alexander Belkevich

1 answer 1

You in $(document).ready attach a click handler to the elements in the $('.jqselect.select-model li:not(:first-child)') sample. However, until the brand is chosen, there are no elements in the models. That is, your handler is not attached to anything. Moreover, each time a brand is selected, all model options are deleted and recreated. Use delegation:

 $(document).on('click', '.jqselect.select-model li:not(:first-child)', function(){ selectAuto('select-year', 'js/json/year.json', 'Год'); });
  • Thank you very much! - Alexander Belkevich