選項標籤

-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

回答

相關問題