2016-05-06 9 views
0

Ich habe eine folgende HTML Dropdown-Menü mit Go Taste, es funktioniert gut für die ersten beiden Option Werte Auswahl zuerst und dann schlagen Go Taste, aber nicht für andere zwei Option Werte, die onclick Ereignisse haben, bitte helfen Sie mir dass, wie mit Onclick-Ereignis in <option> Tag arbeiten, damit ich entsprechende Warnmeldungen ausführen kann. Ich brauche es in Google Chrome-Browser funktionieren. Danke im Voraus.onclick-Ereignis funktioniert nicht mit Option-Tag in HTML?

<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> 

Antwort

2

JQuery

$(function(){ 
 
    $('#testdropdownmenu').on('change', function(){ 
 
    var val = $(this).val(); 
 
    if(val === 'third') { 
 
    alert('third option') 
 
    } 
 
    else if(val === 'fourth') { 
 
    alert('fourth option') 
 
    } 
 
    }) 
 
    })
<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>

JavaScript

function checkval() { 
 
    var val = document.getElementById('testdropdownmenu').value 
 
    alert(val); 
 
}
<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>

Verwenden Sie das onchange-Ereignis beim Auswählen und vergleichen Sie dann dessen Wert.

+0

danke für Ihre Hilfe, es ist für meine Anforderung geholfen. – Nag

+0

Gibt es eine Chance, das Gleiche mit AngularJS ng-change zu tun? – Nag

0

Das Onclick-Attribut wird vom Optionstag nicht unterstützt. verwenden besser die Onchange Funktion auf dem Tag 'wählen'

<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> 
0

Versuchen Sie einfach onFocus zu verwenden, wird ausgelöst, wenn Benutzer den Fokus auf das Element

1

Sie können das "onclick" -Ereignis für das Optionstag nicht auslösen. Stattdessen können Sie das Ereignis "onchange" des ausgewählten Tags verwenden.

0

onclick ist nicht das entsprechende Ereignis befestigen auf select > option

Stattdessen Sie onchange für Ihren Fall verwendet werden soll. onchange wird ausgelöst, wenn Sie den Wert der Auswahlbox ändern. Und dann in Ihrer Funktion klicken Sie auf klicken können Sie überprüfen, ob seine zweite/dritte dann etwas tun. Überprüfen Sie den Code unten:

In HTML:

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

Und in Javascript:

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

hoffe, das hilft !!