Você está usando um navegador desatualizado. Para a visualização correta, atualize seu navegador:

SimpleUi

Mapa do site


SimpleUi
Atualizando

Código para Selects Download

? - +
Povoar selects com ajax
  1. Insira o primeiro select e identifique-o com alguma class ou id, ex: id="select1".
  2. Insira o segundo select com a classe ui_select
  3. Em ui_select, informe o seletor do primeiro select, ex: data-select-trigger="#select1".
  4. 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:
  1. É 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'}.
  2. É 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.
  1. 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.
  2. 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.
Customizar

Gatilho

O gatilho será identificado pela .

Valor padrão

O select carregado terá como valor padrão . Padrão: Nenhum. Saiba mais
Pode ser string para valer sempre e independentemente do valor do primeiro select.
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'}.

Primeiro item

. Padrão: Não adicionar
  • O rótulo do item será .
  • O valor do item será .
  • O atributo do item será . Padrão: selected disabled

Saiba mais
Rótulo, valor e atributo podem ser strings para valerem sempre e independentemente do valor do primeiro select.
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.

Arquivo externo

O arquivo para o segundo select deve ser definido em data-select-href e data-select-href-param.
Esteja atento à política de domínio do browser para requisições ajax (Ajax cross-origin) em data-select-href.
Tem certeza que deseja reiniciar todos os valores?

Resultado para Selects