3

Como passar parâmetros de uma função a outra ?

Segue o código:

<body onload="getfoucs()">
<select id="select_compra" data-limit="3">
	<option disabled selected style="display: none">Aaaaaaaaaaaaa</option>
	<option>Bbbbbbbbb</option>
	<option>Ccccccc</option>
	<option>Ddddddddddd</option>
</select>
 <script>
function datalimit(limit)
{
var selects = document.querySelectorAll('[data-limit]');
    [].forEach.call
    (
    	selects, function(select)
    	{
  	   		var limit = select.getAttribute('data-limit');
       		[].forEach.call
       		(
	       		select.options, function(option)
        		{
    				var text = option.innerHTML.substring(0, limit);
    				option.innerHTML = text;
    			}
    		);
  		}
  	);
}
function getfoucs()
{
	datalimit();
	select_compra.addEventListener
	(
		'change', function()
		{
			datalimit(50);
			/*
			Como eu altero o valor de "limit" e
			Chamo novamente a função datalimit()
			*/
		}
	);
}
</script>
</body>

Minha intenção é que ao disparar o evento change o valor de limit seja alterado para comportar mais caracteres e posteriormente quando o select perder o focus voltar para o valor inicial que é 3(mas vamos por partes).

2
  • Queres mostrar mais caracteres quando estiver focado e menos quando não estiver focado, é isso?
    – Sergio
    Commented 3/01/2017 às 21:25
  • Isso isso isso, izzas...
    – MagicHat
    Commented 3/01/2017 às 21:27

2 Respostas 2

4

Aqui fica uma sugestão:

(function(selects) {
    var limite = 3;

    function verificarLimite(opts) {
        var originais = opts.map(function(option) {
            return option.innerHTML;
        });
        return function(e) {
            opts.forEach(function(option, i) {
                option.innerHTML = e.type == 'blur' ? originais[i].slice(0, limite) : originais[i];
            });
        }
    }
    selects.forEach(function(select) {
		var verificador = verificarLimite(Array.from(select.children));
        select.addEventListener('focus', verificador);
        select.addEventListener('blur', verificador);
        verificador({type:'blur'});
    });
})(Array.from(document.querySelectorAll('[data-limit]')));
<select id="select_compra" data-limit="3">
    <option disabled selected style="display: none">Aaaaaaaaaaaaa</option>
    <option>Bbbbbbbbb</option>
    <option>Ccccccc</option>
    <option>Ddddddddddd</option>
</select>

O código fica bem contido e faz o que queres.

0
2

Mais uma resolução para o problema

<body onload="getfoucs()">
<select id="select_compra" data-limit="3">
	<option disabled selected style="display: none" data-texto="Aaaaaaaaaaaaa">Aaaaaaaaaaaaa</option>
	<option data-texto="Bbbbbbbbb">Bbbbbbbbb</option>
	<option data-texto="Ccccccc">Ccccccc</option>
	<option data-texto="Ddddddddddd">Ddddddddddd</option>
</select>
</body>
<script>
function LimitInput()
	{
		select = document.querySelector('[data-limit]');
	    limit = select.getAttribute('data-limit');
	    [].forEach.call
	    (
	    	select.options,	
	    	function(option)
	    	{
	    		text = option.innerHTML.substring(0, limit);
	    		option.innerHTML = text;
	    	}
	    );
	}
function getfoucs()
{
	LimitInput();
	select_compra.addEventListener
	(
		'focus', function()
		{				
		  var elmnt = document.getElementById('select_compra');
		  for(var i=0; i < elmnt.options.length; i++)
          {
            var texto = elmnt.options[i].getAttribute('data-texto');
            elmnt.options[i].innerHTML  = texto;
          }			
		}
	);
    select_compra.addEventListener
	(
		'blur', function()
		{				
			LimitInput();		
		}
	);
	
}
</script>

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .