Simulieren mit jQuery auf select-Element klicken

Question

Ich benutze diesen Code für Simulieren click auf select Element:

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

und HTML-Code ist:

<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"/> 

Ich teste click und trigger aber beide nicht funktionieren.

Danke für jede Hilfe.

Answer 1

Das ist so nah wie Sie bekommen denke ich:

$(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

Dies ist die beste Cross-Browser-Methode, die ich denke, Sie bekommen können. Getestet auf Safari, Firefox, Chrome und IE. Für Chrome ist Oscar Jaras Antwort der richtige Weg. (Update: 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(); 
    }); 
}); 

Siehe jsFiddle demo

Answer 3

kleines Update (mit toggle) für Oscar Jara Variante
http://jsfiddle.net/mike_s/y5GhB/

Answer 4

ich das ausgewählte Attribut Einstellung endete auf die Option selbst. Dann löst die Änderung sogar auf dem Select-Element aus.

Answer 5

Ich habe ein komplexes select Element, gespeist von der Antwort in einem vorherigen select Element gegeben. Optionen werden von AJAX gespeist, ausgelöst durch onchange Ereignisse.

Für meine Bedürfnisse, um Antworten mit einem "versteckten magischen Ereignis", das Benutzerverhalten simuliert (in einer intensiven Testweise), verwende ich den folgenden jQuery-Code in "mein magisches Ereignis". Er wählt die Option durch seinen Index:

// 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 Korrekturen ;-)