Insira o primeiro select e identifique-o com alguma class ou id, ex: id="select1".
Insira o segundo select com a classe ui_select
Em ui_select, informe o seletor do primeiro select, ex: data-select-trigger="#select1".
Também em ui_select, informe a URL onde serão carregados os dados, ex: data-select-href="path/file.html" e o parâmetro requisitado por esse aquivo, ex: data-select-href-param="param". Atente-se à política de domínio do browser para requisições ajax (Ajax cross-origin).
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
É possível definir o valor-default do segundo select
Para isso, crie o atributo data-select-default em ui_select e defina o valor-default.
O valor desse atributo pode ser string para valer sempre e independentemente do valor do primeiro select. Mas também pode ser objeto JSON para representar uma condicional, onde o valor do segundo select será aplicado de acordo com a chave que representa o valor do primeiro select, ex: data-select-default="{'select1_value_a':'x', 'select1_value_b':'y'}.
É possível adicionar um primeiro item no segundo select
Para isso, crie o atributo data-select-first-option em ui_select e defina o rótulo desse item.
Caso queira, crie o atributo data-select-first-option-value em ui_select e defina o valor desse item (padrão: vazio).
Por fim, também é possível criar o atributo data-select-first-option-attr em ui_select e defina os atributos desse item (padrão: selected disabled).
Rótulo, valor e atributo podem ser strings para valerem sempre e independentemente do valor do primeiro select. Mas também podem ser objetos JSON para representarem condicionais, onde as respectivas ações no segundo select serão aplicadas de acordo com as chaves que representam o valor do primeiro select, ex: data-*="{'select1_value_a':'x', 'select1_value_b':'y'}.
Não precisam ser todos do mesmo tipo. Um pode ser string e o outro ser um objeto.
Após a criação do ui_select, usuários avançados podem implementar uma função do tipo callready
Para isso, crie a função callready_select(xdi) e implemente as ações que irão ocorrer após a criação de ui_select.
Onde xdi representa o loop que identifica o seletor de ui_select.
Essa função não é obrigatória, ou seja, só será executada se existir. Caso positivo, para evitar duplicidades, lembre-se de implementar a função callready em arquivos específicos, presente nas respectivas páginas finais, já que o seu objetivo não é genérico.
Antes e depois do carregamento do segundo select, usuários avançados podem implementar uma função do tipo callbefore e callback
Para isso, crie a função callbefore_select(xdi) e/ou callback_select(xdi,result) e implemente as ações que irão ocorrer antes e/ou depois do carregamento.
Onde xdi representa o loop que identifica o seletor de ui_select e result pode ser success ou fail, de acordo com o carregamento do arquivo ajax.
Essas funções não são obrigatórias, ou seja, só serão executadas se existirem. Caso positivo, para evitar duplicidades, lembre-se de implementar as funções callbefore e callback em arquivos específicos, presentes nas respectivas páginas finais, já que os seus objetivo não são genéricos.