选项标签

-1

我有下面的下拉代码和EACK不同的选择，我想触发我的功能之一内发射了一个JavaScript函数选项标签

<select name="webmenu" id="webmenu"> 
<option value="UK" id="UK_button" title="assets/images/uk_flag.png">this is the uk</option> 
<option value="US" id="US_button" title="assets/images/us_flag.png">this is the us</option> 
<option value="EU" id="EU_button" title="assets/images/euro_flag.png">this is the eu</option> 
</select>

我有这样的jQuery中

$('#webmenu').change(function(){ 

var temp=$(this).children(":selected").val(); 
switch(temp) 
{ 
    case 'UK': 
     alert('Hello UK'); 
     break; 
    case "EU": 
     alert("Hi EU"); 
     break; 
    case "US": 
     alert("Hi America!"); 
     break; 
} 

});

但我只想使用JavaScript。你能帮助展示如何重写jquery代码以获得理想的效果吗？

来源

2014-10-07 user2840467

这是纯JS

HTML：

<select name="webmenu" id="webmenu" onchange="myFunction()"> 
<option value="UK" id="UK_button" title="assets/images/uk_flag.png">this is the uk</option> 
<option value="US" id="US_button" title="assets/images/us_flag.png">this is the us</option> 
<option value="EU" id="EU_button" title="assets/images/euro_flag.png">this is the eu</option> 
</select>

的Javascript：

function myFunction() { 
    var temp = document.getElementById("webmenu").value; 
    switch(temp) 
    { 
    case 'UK': 
     alert('Hello UK'); 
     break; 
    case "EU": 
     alert("Hi EU"); 
     break; 
    case "US": 
     alert("Hi America!"); 
     break; 
    } 
}

来源

2014-10-07 11:11:17 Norrj

好了，你可以做到这一点

var elem = document.querySelector('#webmenu'); 
elem.onchange = function() { 
    var temp = elem.options[e.selectedIndex].value; 
    switch (temp) { 
     case 'UK': 
      alert('Hello UK'); 
      break; 
     case "EU": 
      alert("Hi EU"); 
      break; 
     case "US": 
      alert("Hi America!"); 
      break; 
    } 
}

来源

2014-10-07 09:32:02

@mplungjan OP希望它不是吗？ – 2014-10-07 09:35:41

试试这个：创建JavaScript函数，并调用它的选择框更改事件。

<select name="webmenu" id="webmenu" onchange="webmenuChanged(this)"> 
<option value="UK" id="UK_button" title="assets/images/uk_flag.png">this is the uk</option> 
<option value="US" id="US_button" title="assets/images/us_flag.png">this is the us</option> 
<option value="EU" id="EU_button" title="assets/images/euro_flag.png">this is the eu</option> 
</select> 


<script> 
function webmenuChanged(selectbox) 
{ 
    var temp=selectbox.value; 
    switch(temp) 
    { 
    case 'UK': 
     alert('Hello UK'); 
     break; 
    case "EU": 
     alert("Hi EU"); 
     break; 
    case "US": 
     alert("Hi America!"); 
     break; 
    } 
} 
</script>

JSFiddle DEMO

来源

2014-10-07 09:35:32

可以使用onchange事件。

如：

var el = document.querySelector('#webmenu'); 
el.addEventListener('onchange', function(){ 
    switch (elem.options[e.selectedIndex].value;) { 
     case 'UK': 
      alert('Hello UK'); 
      break; 
     case "EU": 
      alert("Hi EU"); 
      break; 
     case "US": 
      alert("Hi America!"); 
      break; 
    } 
});

来源

2014-10-07 09:35:33 RichieAHB

既然你没有上选择多，只是做

var cc = {"UK":"United Kingdom","EU":"Europe","US":"America"} 
window.onload=function() { 
    document.getElementById("webmenu").onchange=function(){ 
    var val = this.value; 
    alert("Hello "+cc[val]); 
    } 
}

然而，我强烈建议你增加一个选项

FIDDLE

<option value="">Please select</option>

和测试值

var cc = {"UK":"United Kingdom","EU":"Europe","US":"America"} 
window.onload=function() { 
    document.getElementById("webmenu").onchange=function(){ 
    var val = this.value; 
    if (val) alert("Hello "+cc[val]); 
    } 
}

来源

2014-10-07 09:37:02 mplungjan

OP只想在javascript中制作它 – 2014-10-07 09:38:22

更新 - 我错过了那部分 – mplungjan 2014-10-07 09:39:02

Js Fiddle

您可以使用onchange的选择

function val() { 

    var temp = document.getElementById('webmenu').value 

    switch (temp) { 
     case 'UK': 
      alert('Hello UK'); 
      break; 
     case "EU": 
      alert("Hi EU"); 
      break; 
     case "US": 
      alert("Hi America!"); 
      break; 
    } 

}

来源

2014-10-07 09:37:52

尝试。它的工作。我已经检查过了。

<html> 
    <head> 

      <script type="text/javascript"> 
       function get_value(obj){ 

        var e = document.getElementById(obj.id); 
        var strUser = e.options[e.selectedIndex].value 
        switch(strUser) 
        { 
         case 'UK': 
          alert('Hello UK'); 
          break; 
         case "EU": 
          alert("Hi EU"); 
          break; 
         case "US": 
          alert("Hi America!"); 
          break; 
        } 
       } 
     </script> 
    </head> 
    <body> 
     <select name="webmenu" id="webmenu" onchange="get_value(this);"> 
      <option value="UK" id="UK_button" title="assets/images/uk_flag.png">this is the uk</option> 
      <option value="US" id="US_button" title="assets/images/us_flag.png">this is the us</option> 
      <option value="EU" id="EU_button" title="assets/images/euro_flag.png">this is the eu</option> 
     </select> 
    </body> 
</html>

来源

2014-10-07 09:41:19

很差的编程通过对象后通过它的ID获取对象。只需使用var strUser ='obj.options [obj.selectedIndex] .value' – mplungjan 2014-10-07 09:42:56

var strUser = obj.value。这也将给出答案 – 2014-10-07 10:02:27

这是我的解决方案：

document.getElementById('webmenu').addEventListener('change', function() { 
    switch(this.options[this.selectedIndex].value) { 
     case 'UK': 
      alert('Hello UK'); 
      break; 
     case "EU": 
      alert("Hi EU"); 
      break; 
     case "US": 
      alert("Hi America!"); 
      break; 
    } 
}, false);

希望它能帮助！

来源

2014-10-07 09:43:58 iovis

确保浏览器支持。 onchange支持所有 – mplungjan 2014-10-07 09:46:49

你必须把“attachEvent（'onclick'，function）;”支持IE8。但我正在回应一个基本的javascript问题，而不是一个基本的跨浏览器支持。 – iovis 2014-10-07 10:11:32

回答

相关问题