Question

我有一个带有Go按钮的html下拉菜单，它首先适用于前两个选项值，然后点击Go按钮，但不适用于其他两个选项值，哪些有onclick事件，请帮助我如何使用<option>标记中的onclick事件，以便我可以执行相应的警报消息。我需要它应该在谷歌Chrome浏览器中工作。提前谢谢。

<html>
<head>
<script>
function third(){
alert("It is a third option event");
}
function fourth(){
alert("Fourth option value");
}
</script>
</head>
<form name="testform" id="testformid">
<select name="testdropdownmenu" >
<option value="" selected>Please Select</option>
<option value="https://www.w3schools.com">First Option</option>
<option value="https://www.google.co.in">Second Option</option>
<option onclick="third()">Third Option</option>
<option onclick="fourth()">Fourth Option</option>
</select>
<input type="button" name="go" value="Go" onClick="location=document.testform.testdropdownmenu.options
[document.testform.testdropdownmenu.selectedIndex].value;">
</form>
</html>

Answer 1

的Jquery

＆＃13;

$(function(){
  $('#testdropdownmenu').on('change', function(){
  var val = $(this).val();
  if(val === 'third') {
    alert('third option') 
  }
  else if(val === 'fourth') {
    alert('fourth option') 
  }
  })
  })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="testform" id="testformid">
<select name="testdropdownmenu" id="testdropdownmenu">
<option value="" selected>Please Select</option>
<option value="https://www.w3schools.com">First Option</option>
<option value="https://www.google.co.in">Second Option</option>
<option value="third">Third Option</option>
<option value="fourth">Fourth Option</option>
</select>
<input type="button" name="go" value="Go" onClick="location=document.testform.testdropdownmenu.options
[document.testform.testdropdownmenu.selectedIndex].value;">
</form>

＆＃13;

的JavaScript

＆＃13;

function checkval() {
  var val = document.getElementById('testdropdownmenu').value 
  alert(val);
}

＆＃13;

    <form name="testform" id="testformid">
    <select name="testdropdownmenu" id="testdropdownmenu"onchange="checkval()">
    <option value="" selected>Please Select</option>
    <option value="https://www.w3schools.com">First Option</option>
    <option value="https://www.google.co.in">Second Option</option>
    <option value="third">Third Option</option>
    <option value="fourth">Fourth Option</option>
    </select>
    <input type="button" name="go" value="Go" onClick="location=document.testform.testdropdownmenu.options
    [document.testform.testdropdownmenu.selectedIndex].value;">
    </form>

＆＃13;

在select上使用onchange事件，然后比较它的值。

Answer 2

你无法触发＆＃34; onclick＆＃34;选项标签的事件。相反，您可以使用＆＃34; onchange＆＃34;选择标记的事件。

Answer 3

选项标记不支持onclick属性。更好地使用“选择”上的onchange功能。标签

<html>
<head>

<script>

function changeValue() {
   //get selected value
}
</script>
</head>
<form name="testform" id="testformid">
<select name="testdropdownmenu" onchange="changeValue();" >
<option value="" selected>Please Select</option>
<option value="https://www.w3schools.com">First Option</option>
<option value="https://www.google.co.in">Second Option</option>
<option >Third Option</option>
<option >Fourth Option</option>
</select>
<input type="button" name="go" value="Go" onClick="location=document.testform.testdropdownmenu.options
[document.testform.testdropdownmenu.selectedIndex].value;">
</form>
</html>

Answer 4

只是尝试使用onFocus，当用户专注于元素时会触发

Answer 5

onclick不适合附加在select > option

上

相反，您应该使用onchange作为案例。每当您更改选择框的值时，onchange都会触发。然后在你的函数调用点击，你可以检查它的第二个/第三个然后做什么。检查以下代码：

在HTML中：

 <select id="testdropdownmenu" onchange="myFunction()">

在Javascript中：

function myFunction() {
    var favValue = document.getElementById("testdropdownmenu").value;
    // Do something your favourite value appears here
    alert(favValue);
}

希望这会有所帮助!!

onclick事件不能与html中的选项标签一起使用？

5 个答案: