Dropdown-Liste Autofokus bei Auswahl mit Jquery

Ich versuche, auf eine Schaltfläche zu klicken, die ein Dropdown auf einer Auswahlschaltfläche mit Fokus und Eingabetaste auslöst. Die Eingabe wird jedoch nicht ausgelöst. Hier ist mein CodeDropdown-Liste Autofokus bei Auswahl mit Jquery

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
    </head> 

    <body ng-controller="myCtrl"> 
    <button id="showButton">Click Me!</button> 
    <select id="show"> 
     <option value=""></option> 
     <option value="">One</option> 
     <option value="">Two</option> 
     <option value="">Three</option> 
    </select> 
    <input type = "text" id="dean"> 
    <script type="text/javascript"> 
     $("#showButton").click(function(){ 
     $("#show").focus(); 
     e = $.Event('keyup'); 
     e.keyCode= 13; // enter 
     $('#show').trigger(e); 
     }); 
    </script> 
    </body> 
</html>

Quelle

2016-05-24 Dean Christian Armada

Siehe [http://stackoverflow.com/questions/430237/is-it-possible-to-use-js-to-open-an-html-select-to-show-its-option-list] (http://stackoverflow.com/questions/430237/is-it-possible-to-use-js-to-open-an-html-select-to-show-its-option-list) – TehSphinX

oder hier http://stackoverflow.com/questions/249192/how-can-you-programmally-tell-an-html-select-to-drop-down-for-example-due – TehSphinX

Ich frage mich, ob es möglich ist, einen Tastendruck an zu aktivieren das select-Tag wie "Enter" –

Dies ist wahrscheinlich nur in Chrome funktioniert.

$("#showButton").click(function() { 
 
    var e = new MouseEvent('mousedown', { 
 
    'view': window, 
 
    'bubbles': true, 
 
    'cancelable': true 
 
    }); 
 
    
 
    $("#show")[0].dispatchEvent(e); 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
</head> 
 

 
<body ng-controller="myCtrl"> 
 
    <button id="showButton">Click Me!</button> 
 
    <select id="show"> 
 
    <option value=""></option> 
 
    <option value="">One</option> 
 
    <option value="">Two</option> 
 
    <option value="">Three</option> 
 
    </select> 
 
    <input type="text" id="dean"> 
 
</body> 
 

 
</html>

Quelle

2016-05-24 06:41:16 Cornwell

würde ich so etwas wie diese Kasse:

Trigger a select form element to show its options (open drop down options list) with Javascript

HTML

<input type="button" id="show" value="show" /> 
<select id="myslect"> 
    <option>nothing</option> 
    <option>something</option> 
    <option>anything</option> 
</select>

JAVASCRIPT

$("#show").click(function() { 
    var element = $("select")[0], 
     worked = false; 
    if(document.createEvent) { // all browsers 
     var e = document.createEvent("MouseEvents"); 
     e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 
      worked = element.dispatchEvent(e); 
    } else if (element.fireEvent) { // ie 
     worked = element.fireEvent("onmousedown"); 
    } 
    if (!worked) { // unknown browser/error 
     alert("It didn't worked in your browser."); 
    } 
});

Eine andere Lösung wäre, die Drop-Down-nachahmt und den Zustand des einen hin- und herzuschalten. Nicht die beste Art, es zu tun, aber auf diese Weise haben Sie die vollständige Kontrolle über das Element.

Quelle

2016-05-24 06:53:09

Dropdown-Liste Autofokus bei Auswahl mit Jquery

Antwort

Verwandte Themen