Wie zeigt man das Auswahlfeld Optionen auf Button Klick?

Question

Ich möchte die Auswahl Box Optionen auf Schaltfläche anzeigen. Nicht im Auswahlbox-Dropdown. Wenn ich auf die Schaltfläche klicke, erscheint die Dropdown-Liste.

AKTUALISIERT ich meine. Wenn Sie auf die Dropdown-Box klicken, wird das Bestätigungsfeld angezeigt. Wenn ich dann auf "Abbrechen" klicke, wird nichts angezeigt. Wenn ich auf "OK" klicke, erscheint die Dropdown-Liste.

Hier ist mein Code

<select id="mySelect" name="myselect" onclick="myFunction()"> 
<option value="Audi">Audi 
<option value="BMW">BMW 
<option value="Mercedes">Mercedes 
<option value="Volvo">Volvo 
</select> 

<p id="demo"></p> 

<script> 
function myFunction() { 
    var txt; 
    var select=document.getElementsByName("myselect"); 
    var r = confirm("Press a button!"); 
    if (r == true) { 
     select.show(); 
     txt = "You pressed OK!"; 
    } else { 
     txt = "You pressed Cancel!"; 
    } 
     document.getElementById("demo").innerHTML = txt; 
    } 
    </script> 

Answer 1

so etwas wie dieses Versuchen:

function myFunction(item) { 
 
    var txt; 
 
    var dropDown=document.getElementsByName("myselect"); 
 
    var r = confirm("Press a button!"); 
 
    if (r == true) {  
 
    item.setAttribute("size", item.options.length); 
 
     txt = "You pressed OK!"; 
 
    } else { 
 
     
 
     txt = "You pressed Cancel!"; 
 
    } 
 
     document.getElementById("demo").innerHTML = txt; 
 
    }

<select id="mySelect" name="myselect" onclick="myFunction(this)"> 
 
<option value="Audi">Audi 
 
<option value="BMW">BMW 
 
<option value="Mercedes">Mercedes 
 
<option value="Volvo">Volvo 
 
</select> 
 

 
<p id="demo"></p>

Answer 2

Ich glaube nicht, es ist möglich, Ihre beabsichtigte Funktionalität genau zu imitieren; Das Anzeigen eines synchronen confirm-Dialogfelds scheint den Fokus auf das Element select zu richten. Allerdings konnte ich es so einrichten, dass man die select nach selbst wählen kann, OK zum Dialog sagt.

var demo = document.getElementById('demo'), ignore = false 
 

 
document.getElementById('mySelect').addEventListener('focus', function() { 
 
    if (ignore) { 
 
    ignore = false 
 
    } else if (confirm('Press a button!')) { 
 
    demo.textContent = 'You pressed OK!' 
 
    ignore = true 
 
    } else { 
 
    demo.textContent = 'You pressed Cancel!' 
 
    } 
 
})

<select id="mySelect" name="myselect"> 
 
    <option value="Audi">Audi</option> 
 
    <option value="BMW">BMW</option> 
 
    <option value="Mercedes">Mercedes</option> 
 
    <option value="Volvo">Volvo</option> 
 
</select> 
 
<p id="demo"></p>