Jump to content
ndias

criar uma linha com select option

Recommended Posts

alguém sabe como eu faço para criar uma linha igual da imagem anexa para clicar segurando com o botão esquerdo do mouse e arrastar as duas pontas pra esquerda e direita até o valor desejado?

print.jpg

Share this post


Link to post
Share on other sites

obrigado! achei um exemplo simples usando a biblioteca bootstrap-slider versão 9.9.0 e agora to com dificuldade de colocar um evento para chamar uma função que tenho...

 

meu código tá assim:

 

           <input id="ex12c" type="text" />
            <script>
            $("#ex12c").slider({ id: "slider12c", min: 16, max: 36, range: true, value: [19, 23] });
            var sliderC = new Slider("#ex12c", { id: "slider12c", min: 16, max: 36, range: true, value: [19, 23] });   
            </script>

 

se tentar chamar no JQuery assim, não funciona:


            $("#ex12c").change(function(){
                return minhaFunction(this.value);
            }); 

 

se eu colocar direto na input, funciona mas fica num loop infinito:

 

<input id="ex12c" type="text" onchange="minhaFunction(this.value)" />

 

o ideal era chamar a função quando soltasse o range...

 

alguma solução onkeyup?

Share this post


Link to post
Share on other sites
18 horas atrás, ndias disse:

obrigado! achei um exemplo simples usando a biblioteca bootstrap-slider versão 9.9.0 e agora to com dificuldade de colocar um evento para chamar uma função que tenho...

 

meu código tá assim:

 

           <input id="ex12c" type="text" />
            <script>
            $("#ex12c").slider({ id: "slider12c", min: 16, max: 36, range: true, value: [19, 23] });
            var sliderC = new Slider("#ex12c", { id: "slider12c", min: 16, max: 36, range: true, value: [19, 23] });   
            </script>

 

se tentar chamar no JQuery assim, não funciona:


            $("#ex12c").change(function(){
                return minhaFunction(this.value);
            }); 

 

se eu colocar direto na input, funciona mas fica num loop infinito:

 

<input id="ex12c" type="text" onchange="minhaFunction(this.value)" />

 

o ideal era chamar a função quando soltasse o range...

 

alguma solução onkeyup?

 

desisti da biblioteca bootstrap-slider e parti para uma solução polyfill em HTML5.

 

<input type="range" multiple value="10,80" />

 

Veja o JavaScript:

 

(function() {
"use strict";

var supportsMultiple = self.HTMLInputElement && "valueLow" in HTMLInputElement.prototype;

var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");

self.multirange = function(input) {
    if (supportsMultiple || input.classList.contains("multirange")) {
        return;
    }

    var value = input.getAttribute("value");
    var values = value === null ? [] : value.split(",");
    var min = +(input.min || 0);
    var max = +(input.max || 100);
    var ghost = input.cloneNode();

    input.classList.add("multirange", "original");
    ghost.classList.add("multirange", "ghost");

    input.value = values[0] || min + (max - min) / 2;
    ghost.value = values[1] || min + (max - min) / 2;

    input.parentNode.insertBefore(ghost, input.nextSibling);

    Object.defineProperty(input, "originalValue", descriptor.get ? descriptor : {
        // Fuck you Safari >:(
        get: function() { return this.value; },
        set: function(v) { this.value = v; }
    });

    Object.defineProperties(input, {
        valueLow: {
            get: function() { return Math.min(this.originalValue, ghost.value); },
            set: function(v) { this.originalValue = v; },
            enumerable: true
        },
        valueHigh: {
            get: function() { return Math.max(this.originalValue, ghost.value); },
            set: function(v) { ghost.value = v; },
            enumerable: true
        }
    });

    if (descriptor.get) {
        // Again, fuck you Safari
        Object.defineProperty(input, "value", {
            get: function() { return this.valueLow + "," + this.valueHigh; },
            set: function(v) {
                var values = v.split(",");
                this.valueLow = values[0];
                this.valueHigh = values[1];
                update();
            },
            enumerable: true
        });
    }

    ghost.oninput = input.oninput.bind(input);

    function update() {
        ghost.style.setProperty("--low", 100 * ((input.valueLow - min) / (max - min)) + 1 + "%");
        ghost.style.setProperty("--high", 100 * ((input.valueHigh - min) / (max - min)) - 1 + "%");
    }

    input.addEventListener("input", update);
    ghost.addEventListener("input", update);

    update();
}

multirange.init = function() {
    [].slice.call(document.querySelectorAll("input[type=range][multiple]:not(.multirange)")).forEach(multirange);
}

if (document.readyState == "loading") {
    document.addEventListener("DOMContentLoaded", multirange.init);
}
else {
    multirange.init();
}

})();

 

 

Meu desafio agora são dois:

1- Ao mover o range, mostrar instantaneamente o valor esquerdo e direito;

2- Após arrastar o range e soltar o botão do mouse, chamar minha função, passando a value esquerda e direita juntas (por ex 10,80). 

Share this post


Link to post
Share on other sites
4 horas atrás, ndias disse:

 

desisti da biblioteca bootstrap-slider e parti para uma solução polyfill em HTML5.

 

<input type="range" multiple value="10,80" />

 

Veja o JavaScript:

 

(function() {
"use strict";

var supportsMultiple = self.HTMLInputElement && "valueLow" in HTMLInputElement.prototype;

var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");

self.multirange = function(input) {
    if (supportsMultiple || input.classList.contains("multirange")) {
        return;
    }

    var value = input.getAttribute("value");
    var values = value === null ? [] : value.split(",");
    var min = +(input.min || 0);
    var max = +(input.max || 100);
    var ghost = input.cloneNode();

    input.classList.add("multirange", "original");
    ghost.classList.add("multirange", "ghost");

    input.value = values[0] || min + (max - min) / 2;
    ghost.value = values[1] || min + (max - min) / 2;

    input.parentNode.insertBefore(ghost, input.nextSibling);

    Object.defineProperty(input, "originalValue", descriptor.get ? descriptor : {
        // Fuck you Safari >:(
        get: function() { return this.value; },
        set: function(v) { this.value = v; }
    });

    Object.defineProperties(input, {
        valueLow: {
            get: function() { return Math.min(this.originalValue, ghost.value); },
            set: function(v) { this.originalValue = v; },
            enumerable: true
        },
        valueHigh: {
            get: function() { return Math.max(this.originalValue, ghost.value); },
            set: function(v) { ghost.value = v; },
            enumerable: true
        }
    });

    if (descriptor.get) {
        // Again, fuck you Safari
        Object.defineProperty(input, "value", {
            get: function() { return this.valueLow + "," + this.valueHigh; },
            set: function(v) {
                var values = v.split(",");
                this.valueLow = values[0];
                this.valueHigh = values[1];
                update();
            },
            enumerable: true
        });
    }

    ghost.oninput = input.oninput.bind(input);

    function update() {
        ghost.style.setProperty("--low", 100 * ((input.valueLow - min) / (max - min)) + 1 + "%");
        ghost.style.setProperty("--high", 100 * ((input.valueHigh - min) / (max - min)) - 1 + "%");
    }

    input.addEventListener("input", update);
    ghost.addEventListener("input", update);

    update();
}

multirange.init = function() {
    [].slice.call(document.querySelectorAll("input[type=range][multiple]:not(.multirange)")).forEach(multirange);
}

if (document.readyState == "loading") {
    document.addEventListener("DOMContentLoaded", multirange.init);
}
else {
    multirange.init();
}

})();

 

 

Meu desafio agora são dois:

1- Ao mover o range, mostrar instantaneamente o valor esquerdo e direito;

2- Após arrastar o range e soltar o botão do mouse, chamar minha função, passando a value esquerda e direita juntas (por ex 10,80). 

 

 

Consegui resolver assim:

 

<input type="range" multiple value="10,80" oninput="display.value=value" onchange="minhaFunction(display.value)" /> 

<input type="text" id="display" value="10,80" readonly>

 

Valeu!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By PToledo
      Gostaria de uma ajuda.
       
      Tenho um input que receberá valor em reais. Porém no momento da digitação o campo não pode permitir valor menor que 100,00 reais
      como posso fazer isso?
    • By Hashira do Vento
      O exercício pede o que eu faça um código com uma matriz, onde eu peça uma linha qualquer ao usuário, e nela será feito a soma ou média dos elementos contidos.
      O problema é na hora da decisão do usuário na hora de escolher entre média ou soma, escrevendo a letra inicial de uma dessa palavras em maiúsculo. O "If" simplesmente não funciona, e eu acho que seja essa minha dificuldade, pois quando tirei o if, a soma funcionou normalmente (com o código atual a soma fica igual a zero no printf final). E sim, eu pesquisei a fundo sobre o tipo char, mas mesmo assim não consegui resposta alguma para a solução do meu problema :/
      Segue o código:
      Obs: Claramente, o meu código não está terminado (ainda falta pôr a parte da média), a partir do momento em que eu solucionar esse problema principal, creio que conseguirei finalizá-lo sem mais contratempos.
       
      #include <stdio.h> #include <stdlib.h> #include <locale> int main (void){ setlocale (LC_ALL, "Portuguese"); float M [2][2], media; int lin, x, soma1, soma2; char op[5]; printf ("Preencha a matriz: \n"); for (int l = 0; l<2; l++) { //linha for (int c = 0; c<2; c++ ) { //coluna scanf ("%f", &M[l][c]); } } printf ("Que operação você quer? S ou M?\n"); //Entrada do char, escolha da operação scanf ("%s", op); printf ("Em qual linha da matriz a operação deve ser realizada?\n"); scanf ("%d", &x); for (int l = x; l==x; l++) { for (int c = 0; c<2; c++ ){ printf ("%f \n", M[l][c]);//só mostrando os numeros da linha (ignore) if (op=="S") //tenho quase certeza que o problema se encontra aqui soma1= M[l][c]+soma1; } } printf ("O resultado da soma deu %d", soma1); //e na hora de mostrar a soma, ela sempre aparece como zero }
    • By asacap1000
      Galera estou com uma consulta que ainda não consegui entender o porque. gostaria que ela trouxesse em apenas uma linha mas não vem de forma alguma.
       
      SELECT BO.LAGER, BO.ID_OS, K.ID_KLIENT, K.SUCHBEGRIFF CNPJ_CPF, K.NAME, BI.DIV_1 LOTE, BI.DIV_10 DI_DDE, (SELECT DISTINCT DIS.ID_DISPATCHER FROM FISCAL.DOCHD DC, WMS_EADI.DISPATCHER DIS WHERE DC.DOCHD_DOC_ID = BO.NR_NF AND DC.DOCHD_RPS_DESP = DIS.SUCHBEGRIFF) COD_COMISSARIA, (SELECT DISTINCT DIS.BEZ FROM FISCAL.DOCHD DC, WMS_EADI.DISPATCHER DIS WHERE DC.DOCHD_DOC_ID = BO.NR_NF AND DC.DOCHD_RPS_DESP = DIS.SUCHBEGRIFF) COMISSARIA, BO.NR_NF, BO.DATE_BILL, BO.DATE_EMISS, --------ABAIXO OS TIPOS DE SERVIÇOS ONDE ESTÃO OCORRENDO CADA RESULTADO ELE CRIA UMA LINHA---------------- (SELECT SUM(ROUND(OSI.PREIS, 2)) FROM BILL_OS_ITEM OSI WHERE OSI.LAGER = BO.LAGER AND OSI.ID_KLIENT = K.ID_KLIENT AND OSI.ID_OS = BO.ID_OS AND OSI.BILLITE = BI.BILLITE AND OSI.DIV_1 = BI.DIV_1 --AND NVL(OSI.DIV_10, 'x') = NVL(BI.DIV_10, 'x') AND OSI.BILLITE IN (SELECT BLL.BILLITE FROM BILL_ITEM BLL, WERTE WER WHERE BLL.TIPO_FAT = WER.WERT AND WER.WERTE_BER = 'ITENSF' AND WER.WERT = 'ARMAZ')) VLR_ARMAZ, (SELECT SUM(ROUND(OSI.PREIS, 2)) FROM BILL_OS_ITEM OSI WHERE OSI.LAGER = BO.LAGER AND OSI.ID_KLIENT = K.ID_KLIENT AND OSI.ID_OS = BO.ID_OS AND OSI.BILLITE = BI.BILLITE AND OSI.DIV_1 = BI.DIV_1 --AND NVL(OSI.DIV_10, 'x') = NVL(BI.DIV_10, 'x') AND OSI.BILLITE IN (SELECT BLL.BILLITE FROM BILL_ITEM BLL, WERTE WER WHERE BLL.TIPO_FAT = WER.WERT AND WER.WERTE_BER = 'ITENSF' AND WER.WERT = 'GER.RISCO')) VLR_GER_RISCO, (SELECT SUM(ROUND(OSI.PREIS, 2)) FROM BILL_OS_ITEM OSI WHERE OSI.LAGER = BO.LAGER AND OSI.ID_KLIENT = K.ID_KLIENT AND OSI.ID_OS = BO.ID_OS AND OSI.BILLITE = BI.BILLITE AND OSI.DIV_1 = BI.DIV_1 --AND NVL(OSI.DIV_10, 'x') = NVL(BI.DIV_10, 'x') AND OSI.BILLITE IN (SELECT BLL.BILLITE FROM BILL_ITEM BLL, WERTE WER WHERE BLL.TIPO_FAT = WER.WERT AND WER.WERTE_BER = 'ITENSF' AND WER.WERT = 'MOVIMENT')) VLR_MOVIMENTACAO, (SELECT SUM(ROUND(OSI.PREIS, 2)) FROM BILL_OS_ITEM OSI WHERE OSI.LAGER = BO.LAGER AND OSI.ID_KLIENT = K.ID_KLIENT AND OSI.ID_OS = BO.ID_OS AND OSI.BILLITE = BI.BILLITE AND OSI.DIV_1 = BI.DIV_1 --AND NVL(OSI.DIV_10, 'x') = NVL(BI.DIV_10, 'x') AND OSI.BILLITE IN (SELECT BLL.BILLITE FROM BILL_ITEM BLL, WERTE WER WHERE BLL.TIPO_FAT = WER.WERT AND WER.WERTE_BER = 'ITENSF' AND WER.WERT = 'DESUNIT')) VLR_DESUNIT, (SELECT SUM(ROUND(OSI.PREIS, 2)) FROM BILL_OS_ITEM OSI WHERE OSI.LAGER = BO.LAGER AND OSI.ID_KLIENT = K.ID_KLIENT AND OSI.ID_OS = BO.ID_OS AND OSI.BILLITE = BI.BILLITE AND OSI.DIV_1 = BI.DIV_1 --AND NVL(OSI.DIV_10, 'x') = NVL(BI.DIV_10, 'x') AND OSI.BILLITE IN (SELECT BLL.BILLITE FROM BILL_ITEM BLL, WERTE WER WHERE BLL.TIPO_FAT = WER.WERT AND WER.WERTE_BER = 'ITENSF' AND WER.WERT = 'PESAGEM')) VLR_PESAGEM, (SELECT SUM(ROUND(OSI.PREIS, 2)) FROM BILL_OS_ITEM OSI WHERE OSI.LAGER = BO.LAGER AND OSI.ID_KLIENT = K.ID_KLIENT AND OSI.ID_OS = BO.ID_OS AND OSI.BILLITE = BI.BILLITE AND OSI.DIV_1 = BI.DIV_1 --AND NVL(OSI.DIV_10, 'x') = NVL(BI.DIV_10, 'x') AND OSI.BILLITE IN (SELECT BLL.BILLITE FROM BILL_ITEM BLL, WERTE WER WHERE BLL.TIPO_FAT = WER.WERT AND WER.WERTE_BER = 'ITENSF' AND WER.WERT LIKE 'AVERBA%')) VLR_AVERBACAO, (SELECT SUM(ROUND(OSI.PREIS, 2)) FROM BILL_OS_ITEM OSI WHERE OSI.LAGER = BO.LAGER AND OSI.ID_KLIENT = K.ID_KLIENT AND OSI.ID_OS = BO.ID_OS AND OSI.BILLITE = BI.BILLITE AND OSI.BILLITE IN (SELECT BLL.BILLITE FROM BILL_ITEM BLL, WERTE WER WHERE BLL.TIPO_FAT = WER.WERT AND WER.WERTE_BER = 'ITENSF' AND WER.WERT = 'FAT.MINIMO.')) VLR_FAT_MINIMO, (SELECT SUM(ROUND(OSI.PREIS, 2)) FROM BILL_OS_ITEM OSI WHERE OSI.LAGER = BO.LAGER AND OSI.ID_KLIENT = K.ID_KLIENT AND OSI.ID_OS = BO.ID_OS AND OSI.BILLITE = BI.BILLITE AND OSI.DIV_1 = BI.DIV_1 --AND NVL(OSI.DIV_10, 'x') = NVL(BI.DIV_10, 'x') AND OSI.BILLITE IN (SELECT BLL.BILLITE FROM BILL_ITEM BLL, WERTE WER WHERE BLL.TIPO_FAT = WER.WERT AND WER.WERTE_BER = 'ITENSF' AND BLL.BILLITE NOT IN ('21.02', '21.03') AND WER.WERT = 'OUT.SERV.')) VLR_OUTROS_SERV, (SELECT SUM(ROUND(OSI.PREIS, 2)) FROM BILL_OS_ITEM OSI WHERE OSI.LAGER = BO.LAGER AND OSI.ID_KLIENT = K.ID_KLIENT AND OSI.ID_OS = BO.ID_OS AND OSI.BILLITE = BI.BILLITE AND OSI.DIV_1 = BI.DIV_1 --AND NVL(OSI.DIV_10, 'x') = NVL(BI.DIV_10, 'x') AND OSI.BILLITE IN (SELECT BLL.BILLITE FROM BILL_ITEM BLL, WERTE WER WHERE BLL.TIPO_FAT = WER.WERT AND WER.WERTE_BER = 'ITENSF' AND BLL.BILLITE = '21.02' AND WER.WERT = 'OUT.SERV.')) TRANSF_IN, (SELECT SUM(ROUND(OSI.PREIS, 2)) FROM BILL_OS_ITEM OSI WHERE OSI.LAGER = BO.LAGER AND OSI.ID_KLIENT = K.ID_KLIENT AND OSI.ID_OS = BO.ID_OS AND OSI.BILLITE = BI.BILLITE AND OSI.DIV_1 = BI.DIV_1 --AND NVL(OSI.DIV_10, 'x') = NVL(BI.DIV_10, 'x') AND OSI.BILLITE IN (SELECT BLL.BILLITE FROM BILL_ITEM BLL, WERTE WER WHERE BLL.TIPO_FAT = WER.WERT AND WER.WERTE_BER = 'ITENSF' AND BLL.BILLITE = '21.03' AND WER.WERT = 'OUT.SERV.')) TRANSF_OUT FROM BILL_OS BO, BILL_OS_ITEM BI, KLIENTEN K WHERE BO.LAGER = BI.LAGER AND BO.ID_KLIENT = BI.ID_KLIENT AND BO.ID_OS = BI.ID_OS AND BO.LAGER = K.LAGER AND BO.ID_KLIENT = K.ID_KLIENT and k.id_klient = '3099' and BO.NR_NF = '121304' AND BO.STATUS = '90' AND TRUNC(BO.DATE_BILL) BETWEEN '28/08/2019' AND '28/08/2019' GROUP BY BO.LAGER, BO.ID_OS, K.ID_KLIENT, K.SUCHBEGRIFF, K.NAME, BO.DATE_EMISS, BO.NR_NF, BO.DATE_BILL, BI.BILLITE, BI.DIV_1, BI.DIV_10
       
      Alguem consegue identificar neste select porque ele vem assim?
    • By helcarib
      Estou desenvolvendo um sistema que sorteia 20 questoes em um banco mysql e exibe na tela, como se fosse uma prova. Como vou usar como ferramenta de estudo, as questões que o usuários acertarem vão  para o fim da fula e as que errar continua sendo sorteadas junto com as outras até todas serem exibidas em provas.
       
      Isso que descrevi acima ja está funcionando, porque criei um campo na tabela questao, que_estudada que vale 0 pra todas as questoes e quando o usuário  acerta ele passa a valer 1, quando tem menos de 20 registros iguais a 0 ele atualiza tudo pra 0 e recomeca as questões.
       
      Nesse momento queria que o sistema tivesse varios usuarios e que cada um tenha a sua "fila de questoes" e que as que ele acertar continue sendo exibidas para os outros, então criei mais duas tabelas: prova e item com os seguintes campos:
      prova (pro_cod, usu_cod, mat_cod,pro_data)
      item (pro_cod, ite_cod, que_cod)
      cada prova tem só  1 materia, mas tem 20 questões.
      Importante que essas questoes que forem acertadas nao podem se repetir enquanto o usuario não estudar todas elas em provas. Eu estou com dificuldade para fazer isso com multiplos usuários, se alguém puder dar uma luz inicial, aí vou tentar fazer e depois mando a solução. Desde já  muito agradecido!
    • By Thomeny
      Olá pessoal, sou novo no mundo da programação e banco de dados, quer dizer passei vários anos parado em outra área e agora resolvi voltar.
       
      Enfim estou precisando fazer o seguinte:
       
      Tenho dois campos que usa um select (irei colocar logo abaixo) para ambos.
      Esse select traz o resultado iguais para os dois, porém o cliente precisa fazer o seguinte:
       
      Para combobox 1 ao selecionar paciente, esse paciente não apareça no combobox dois porque já foi selecionado.
       
      Como procedo, se puderem ser claros, abaixo segue o select usado em ambos pra trazer a lista de pacientes...
       
      Select Distinct
        PC.PES_COD,
        PC.PES_NOME,
        PF.NASCIMENTO,
        PF.PFI_MAE,
        Concat(PC.PES_COD, ' - ', LTrim(RTrim(PC.PES_NOME)), ' - ', PF.NASCIMENTO, ' - ', LTrim(RTrim(PF.PFI_MAE))) As NOME
      From
        GER_PESSOA PC
        Inner Join
        GER_PESSOA_FISICA PF On (PC.PES_COD = PF.PES_COD)
      Order By
        PC.PES_NOME
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.