如何在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";

}

你的意思是要重置为默认当你点击按钮？ – 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>

试试这个

重置（）是在窗体上完成？不能在选择标签上完成？ – 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>

之后我已经尝试了，但是在点击按钮之后它显示先前选择的值。 – 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>

忘记在你的片段中包含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>

如何在javascript中的onclick事件后设置下拉选择

相关推荐