Question

我有一个ID为 ColorSelect 的选择元素，并且我调用了一个函数来获取该元素的选定值。

我的JavaScript函数：

function changeColor() {  
    var e = document.getElementById("ColorSelect").value;
    //var e = document.getElementById("ColorSelect").val;
    alert(e);
}

和html select元素：

<select id="ColorSelect" onchange="changeColor()">
     @foreach (var sub in item.Kala.Colors)
     {
       <option  value="@sub.id" style="background-color:@sub.color">@sub.name</option>        
     }
     <!-- this part here makes option tag with different value -->
</select>

我已经尝试了几乎所有找到的解决方案。我该怎么办？

Answer 1

正如@ hev1所评论的那样，您的代码工作正常，但我认为您可以使用更好的方法，将事件作为changeColor中的参数传递

<select id="ColorSelect" onchange="changeColor(event)">
     @foreach (var sub in item.Kala.Colors)
     {
          <option  value="@sub.id" style="background-color:@sub.color">@sub.name</option>        
     }

</select>

现在通过后，您将可以在changeColor函数中访问它，并可以通过event.target.value获取选择值

function changeColor(event) {  
    alert(event.target.value);
}

Answer 2

<select id="ColorSelect" onchange="changeColor(this.value)">

@foreach (var sub in item.Kala.Colors)
{

<option  value="@sub.id" style="background-color:@sub.color">@sub.name</option> 

}

</select>

并且javascript代码应如下所示：

<script>
function changeColor(val) {
    alert(val);
}
</script>

在JavaScript中获取HTML选择值

2 个答案: