如何顯示按鈕上的選擇框選項單擊？

Question

我想顯示按鈕上的選擇框選項。不在選擇框下拉菜單中。當我點擊按鈕時，下拉列表將顯示出來。

修訂 我的意思。當點擊下拉框時，確認框將顯示。然後當我點擊取消什麼都沒有顯示。當我點擊確定下拉列表將顯示出來。

這裏是我的代碼

<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

嘗試是這樣的：

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

我不認爲這是可以精確地模仿你想要的功能;顯示同步confirm對話框似乎將焦點從select元素中移除。但是，我能夠做到這一點，以便您可以在之後自己打開選擇，然後在對話框中點擊確定。

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>