Wie kann man "dropdown" auswählen, wenn man irgendwo anders klickt? Diese

Question

ist das, was ich habe:

Eine normale select mit ein paar Optionen ...

Und die Sache ist, ich brauche in einem anderen div klicken, und wenn ich auf, dass ein Klicken, I die Auswahlliste wollen, um zu zeigen, wie sie normalerweise angeklickt wurden und dann dem Benutzer erlauben, von den ausgewählten Optionen

ich habe einige Code bereits

<div onclick="set_select()"></div> 

<select class='form-control' id='opts'> 
<option selected disabled></option> 
<option>Contacto</option> 
<option>Entrevista</option> 
<option>Prensa</option> 
<option>Conferencias</option> 
</select> 

<script type="text/javascript"> 
function set_select(){ 
    var select = document.getElementById('opts'); 
    return select.active = true; 
} 
</script> 

Answer 1

Nicht möglich mit einfachen hTML/JavaScript zu wählen.

Answer 2

Sie benötigen ein Plugin, um Ihr Standardauswahlfeld durch divs zu ersetzen und dann Ihre Funktion zu verwenden, um diese divs auszulösen. Eine davon ist selectmenu: https://jqueryui.com/selectmenu/#product-selection Es gibt viel mehr von ihnen zur Verfügung: https://www.google.pl/search?q=js+select+replacement&gws_rd=cr&ei=wN5ZV8SjMIGLsgGP_IboDQ

Answer 3

Das ist „Art“ mögliche, aber nicht trivial, und Sie müssen möglicherweise einige Managements der Wirkung zu tun, wie ich hier zu tun in dem „change "Ereignis für die Auswahl. Nicht perfekt, aber vielleicht kann dir das einen Anfang geben.

Beachten Sie, dass Sie nur den "Fokus" auf die Auswahl oder verwenden möchten, setzen Sie die sichtbare Größe wie hier, setzen Sie die Auswahlgröße auf die Änderung auf 0 mit event.target.size = 0; und so weiter.

das Markup ein wenig überarbeitet, um die Click-Handler zu ermöglichen:

<div id="clicker">clicker</div> 

<select class='form-control' id='opts'> 
    <option selected disabled></option> 
    <option>Contacto</option> 
    <option>Entrevista</option> 
    <option>Prensa</option> 
    <option>Conferencias</option> 
</select> 

Hier ist das Skript, wie gesagt, nicht perfekt, aber Sie können entscheiden, wie Sie die Änderung Griff/Click Ereignisse.

window.onload = function() { 
    var id = "clicker"; 
    var div = document.getElementById(id); 
    var select = document.getElementById("opts"); 

    div.onclick = function(event) { 
    console.log('clicker div'); 
    select.size = select.options.length; 
    select.focus(); 
    }; 
    select.onclick = function(event) { 
    console.log('opt clicked'); 
    }; 
    select.onchange = function(event) { 
    console.log('opt change'); 
    var index = event.target.selectedIndex; 
    console.log(index); 
    event.target.size = index + 2; 
    }; 
} 

Hier ist eine Geige Sie Sie verwenden können, um den Einstieg: https://jsfiddle.net/MarkSchultheiss/mL0b7ubr/

Beachten Sie, wenn Sie die „Standard“ Größe für die Auswahl verwenden möchten Sie, dass wie so erkennen kann:

if (event.target.type == "select-one") { 
    event.target.size = 1; 
} else { 
    event.target.size = 4; 
} 

Hier ist eine Geige mit dieser Änderung und ein bisschen sauberer auf dem Ereignisanhang: https://jsfiddle.net/MarkSchultheiss/mL0b7ubr/1/