Simula clic su Seleziona elemento con jQuery

Question

Io uso questo codice per simulare click su select elemento:

$(function(){ 
    $("#click").click(function(){ 
     $("#ts").click(); 
     //$("#ts").trigger("click"); 
    }); 
}); 

e il codice HTML è:

<select id="ts"> 
    <option value="1">1</option> 
    <option value="2">Lorem ipsum dolor s.</option> 
    <option value="3">3</option> 
</select> 

<input type="button" id="click" value="Click"/> 

I test click e trigger ma entrambi non funziona.

Grazie per qualsiasi aiuto.

Answer 1

Questo è il più vicino si arriva penso:

$(function(){ 
    $("#click").on('click', function(){ 
     var s = $("#ts").attr('size')==1?5:1 
     $("#ts").attr('size', s); 
    }); 
    $("#ts option").on({ 
     click: function() { 
      $("#ts").attr('size', 1); 
     }, 
     mouseenter: function() { 
      $(this).css({background: '#498BFC', color: '#fff'}); 
     }, 
     mouseleave: function() { 
      $(this).css({background: '#fff', color: '#000'}); 
     } 
    }); 
}); 

FIDDLE

Answer 2

questo è il miglior metodo di cross browser penso che si può ottenere. Testato su Safari, Firefox, Chrome e IE. Per Chrome, la risposta di Oscar Jara è la strada da percorrere. (aggiornamento: 10-13-2016)

$(function() { 
    $("#click").on('click', function() { 
     var $target = $("#ts"); 
     var $clone = $target.clone().removeAttr('id'); 
     $clone.val($target.val()).css({ 
      overflow: "auto", 
      position: 'absolute', 
      'z-index': 999, 
      left: $target.offset().left, 
      top: $target.offset().top + $target.outerHeight(), 
      width: $target.outerWidth() 
     }).attr('size', $clone.find('option').length > 10 ? 10 : $clone.find('option').length).change(function() { 
      $target.val($clone.val()); 
     }).on('click blur keypress',function(e) { 
     if(e.type !== "keypress" || e.which === 13) 
      $(this).remove(); 
     }); 
     $('body').append($clone); 
     $clone.focus(); 
    }); 
}); 

Vedi jsFiddle demo

Answer 3

piccolo aggiornamento (con toggle) per Oscar Jara variante
http://jsfiddle.net/mike_s/y5GhB/

Answer 4

sono finito impostando l'attributo selezionato sulla l'opzione stessa. Quindi attivare la modifica anche sull'elemento select.

Answer 5

Ho un elemento complesso select, alimentato dalla risposta fornita in un precedente elemento select. Le opzioni sono alimentate da AJAX, attivato dagli eventi onchange.

Per le mie esigenze, per precompilare le risposte con un "evento magico nascosto" che simula il comportamento dell'utente (in un modo di test intensivo) utilizzo il seguente codice jQuery in "il mio evento magico". Si seleziona l'opzione per il suo indice:

// Quick feed of my Car Form  
document.getElementById('carbrand').selectedIndex = 30; // "PORSCHE" 
document.getElementById('carbrand').onchange(); 

var timeoutID = window.setTimeout(function() { 

    document.getElementById('model').selectedIndex = 1; // "911" 
    document.getElementById('model').onchange(); 

    var timeoutID = window.setTimeout(function() { 
     document.getElementById('energy').selectedIndex = 1; // "SUPER" 
     document.getElementById('energy').onchange(); 
    } , 200); 

} , 200); 

Merci à https://stackoverflow.com/users/1324/paul-roub pour les correzioni ;-)