Symulacja kliknij select elementu z jQuery

Question

Używam tego kodu do symulacyjnej click na select element:

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

i HTML kod jest:

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

przetestować click i trigger ale oba nie działają.

Dzięki za pomoc.

Answer 1

To jest tak blisko, jak dostaniesz myślę:

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

Jest to najlepszy sposób przeglądarka krzyż myślę, że można dostać. Testowane w Safari, Firefox, Chrome i IE. Dla Chrome odpowiedź Oscara Jary jest drogą do zrobienia. (aktualizacja: 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(); 
    }); 
}); 

Zobacz jsFiddle demo

Answer 3

małą aktualizację (z toggle) dla wariantu Oscar Jara
http://jsfiddle.net/mike_s/y5GhB/

Answer 4

skończyło się ustawiając wybrany atrybut sama opcja. Następnie wyzwalanie zmiany nawet na elemencie select.

Answer 5

Mam złożony element select, podawany przez odpowiedź podaną w poprzednim elemencie select. Opcje są dostarczane przez AJAX, wywołane przez zdarzenia onchange.

Dla moich potrzeb, aby uzupełnić odpowiedzi "ukrytym magicznym wydarzeniem", które symuluje zachowanie użytkownika (w intensywny sposób testowania), używam następującego kodu jQuery w "moim magicznym wydarzeniu". Wybiera opcję przez indeksie:

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