2014-11-03 116 views
16

我想在下拉列表中的值更改時調用javascript函數。 我不想硬編碼下拉列表ID下拉列表中調用javascript函數onchange事件

因此不使用document.getElementById

我的代碼:

<select id ="ddl" name="ddl" onmousedown="this.value='';" onchange="jsFunction(this.value);"> 
    <option value='1'>One</option> 
    <option value='2'>Two</option> 
    <option value='3'>Three</option> 
</select> 

function jsFunction(value) 
{ 
    alert(value); 
} 

這是給錯誤ReferenceError: jsFunction is not defined

小提琴:http://jsfiddle.net/6uyz4b8x/1/

+2

[想要這個](http://jsfiddle.net/ 6uyz4b8x/2 /)?你必須更新小提琴設置改變第二下拉到** nowrap在 **到fidddle! – 2014-11-03 07:57:24

+0

@DhavalMarthak:是+1! – Shaggy 2014-11-03 08:00:25

回答

16

你的代碼工作正是你需要DOM準備好之前宣佈的javscript方法。

your working example

8

我不知道你爲什麼需要這個onmousedown事件這裏,但你必須做的是把你的功能高於實際使用。看看下面的snipplet:

<script type="text/javascript"> 
 
function jsFunction(value) 
 
{ 
 
    alert(value); 
 
} 
 
</script> 
 

 
<select id ="ddl" name="ddl" onmousedown="this.value='';" onchange="jsFunction(this.value);"> 
 
    <option value='1'>One</option> 
 
    <option value='2'>Two</option> 
 
    <option value='3'>Three</option> 
 
</select>

1

jsFunction不是好關閉。更改爲:

jsFunction = function(value) 
{ 
    alert(value); 
} 

,不使用全局變量和函數,把它變成module

+0

它不能解決問題。你的回答只是提供很好的建議。 – 2014-11-03 08:05:24

+0

檢查,它解決了:) – bemol 2014-11-03 08:08:10

+0

奇怪...它實際上。對不起,;) – 2014-11-03 08:10:24

3

使用jQuery

$("#ddl").change(function() { 
       alert($(this).val()); 
      }); 

jsFiddle

+0

如果我想獲得文本的選擇也是如此。我試過'$(this).text()',但是它顯示了每一次點擊所有下拉菜單的所有文本。 – Unbreakable 2017-07-28 13:32:14

4

你只要試試這個,它很容易

<script> 

    $("#YourDropDownId").change(function() { 
      alert($("#YourDropDownId").val()); 
     }); 

</script> 
+1

如何獲得文本 – Unbreakable 2017-07-28 13:33:16

+0

@Unbreakable: 'var e = document.getElementById(「YourDropDownId」); var str = e.options [e.selectedIndex] .value;' – Rashmy 2018-01-22 10:45:44