如何在javascript中的onclick事件後設置下拉選擇

從下拉列表中選擇並單擊該按鈕後，我有一個下拉菜單，其中包含幾個選項和一個按鈕上的onclick事件，如何將下拉菜單設置爲它的默認值是由JavaScript選擇的。如何在javascript中的onclick事件後設置下拉選擇

<select id="userType"> 
       <option value="Select" disabled selected 
       id="myDefault">Select</option> 
       <option value="1">Games</option> 
       <option value="2">Movies</option> 
      </select> 
<button type="button" name="button"onclick="addOption()">Send</button> 

function addOption(){ 
if (userType.value === "Select") { 
    alert("Please select correct option"); 
} 
else{ 
    console.log(userType.options[userType.selectedIndex].value); 
} 
document.getElementById('userType').value = "Select";

}

來源

2017-08-03 tankit88

你的意思是要重置爲默認當你點擊按鈕？ – ZearaeZ

是的，所選選項的值傳遞並且下拉列表設置爲「選擇」 – tankit88

，因此您希望在單擊該按鈕後重置下拉列表。我的意思是它應該重置爲下拉菜單中的默認值？ – Jok3r

<html> 
 

 
<body> 
 

 

 
<form id="myForm"> 
 
    
 
<select id="a"> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="opel">Opel</option> 
 
    <option value="audi">Audi</option> 
 
    
 
</select> 
 
<br> 
 
    <input type="button" onclick="myFunction()" value="Reset"> 
 
</form> 
 

 

 

 
</body> 
 
</html> 
 
<script> 
 
function myFunction() { 
 
document.getElementById('a').selectedIndex = 0; 
 

 
} 
 
</script>

試試這個

來源

2017-08-03 06:12:48 Jok3r

重置（）是在窗體上完成？不能在選擇標籤上完成？ – tankit88

試試吧，我已經改變了。 – Jok3r

老兄非常感謝它的工作，事實證明有物化css框架的一些問題，它不允許它默認更新它，我必須檢查，否則它的工作正常....再次感謝！ – tankit88

漂亮的直線前進。只需通過id選擇輸入並將其值設置爲默認值即可。

function addOption(){ 
 
    // Do stuff...and then: 
 
    document.getElementById('userType').value = "Select"; 
 

 
}

<select id="userType"> 
 
       <option value="Select" disabled selected 
 
       id="myDefault">Select</option> 
 
       <option value="1">Games</option> 
 
       <option value="2">Movies</option> 
 
      </select> 
 
<button type="button" name="button"onclick="addOption()">Send</button>

來源

2017-08-03 05:59:41

之後我已經嘗試了，但是在點擊按鈕之後它顯示先前選擇的值。 – tankit88

我的腳本正在上面的代碼片段中工作。也許用你正在使用的JS腳本更新你的問題可以幫助我們避免爲什麼你的問題不是。 –

我已經添加了我的腳本，它在應該觸發事件的條件之後非常簡單，並且將下拉菜單設置爲默認，儘管在控制檯中它顯示Select但不更新頁面本身。 – tankit88

這是你的工作代碼：

$("button").click(function() { 
 
    $('select').prop('selectedIndex', 0); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="userType"> 
 
       <option value="Select" disabled selected 
 
       id="myDefault">Select</option> 
 
       <option value="1">Games</option> 
 
       <option value="2">Movies</option> 
 
      </select> 
 
<button type="button" name="button">Send</button>

來源

2017-08-03 06:01:44 ZearaeZ

忘記在你的片段中包含JQuery :) –

是的，我很抱歉。感謝提醒我。我只是修復它。 – ZearaeZ

您可以將change事件<select>元素，聲明一個變量，在事件處理程序中設置變量以true來驗證t發生了事件change事件。在click的<button>集合select.selectedIndex屬性到0如果Boolean的值是true，集合Boolean到false。

<script> 
 
    var changed, select; 
 
    function addOption() { 
 
    if (changed) { 
 
     select.selectedIndex = 0; 
 
     changed = false; 
 
    } 
 
    } 
 
    onload = function() { 
 
    select = document.getElementById("userType"); 
 
    select.onchange = function() { 
 
     changed = true; 
 
    } 
 

 
    } 
 
</script> 
 

 
<select id="userType"> 
 
       <option value="Select" disabled selected 
 
       id="myDefault">Select</option> 
 
       <option value="1">Games</option> 
 
       <option value="2">Movies</option> 
 
      </select> 
 
<button type="button" name="button" onclick="addOption()">Send</button>

來源

2017-08-03 06:10:35 guest271314

如何在javascript中的onclick事件後設置下拉選擇

回答

相關問題