在javascript中获取<s:select>的选定listValue答案

【问题标题】：Getting the selected listValue of <s:select> in javascript在javascript中获取<s:select>的选定listValue
【发布时间】：2014-11-20 00:52:51
【问题描述】：

我正在使用 struts 的标签来显示项目列表。

<s:select name="example" id="example" list="exampleList" listKey="exampleKey" 
listValue="exampleValue" onchange="fun()"/>

现在我有了一个 javascript 函数：

function fun()
{
  var ex=document.getElementById("example");
  alert(ex.value);
}

在此函数中，我需要获取所选项目的 listValue，但是当我使用上述代码时，它只会提醒我已选择的 listKey。如何在 javascript 函数中获取 listValue 而不是 listKey？

【问题讨论】：

对于 JS 问题，请发布呈现的 HTML 而不是 JSP。
@Quaternion 我添加了一个带有渲染 HTML 的答案和一个似乎运行良好的解决方案。

标签： javascript struts2

【解决方案1】：

  $(document).ready(function() {
        $('#reminderTypeID').change(function() 
       {
             var ex = document.getElementById("reminderTypeID");    
        var selTex = ex[$('#reminderTypeID').val()].text;
        var selVal = ex[$('#reminderTypeID').val()].value;
        alert(ex[$('#reminderTypeID').val()].text);  
      });
   });

【讨论】：

从代码中移除 onchange 并在其中添加 jquery 更改事件。
Nilesh，如果您是在向发帖人讲话，那么如果您对自己的答案发表评论，他们将不会收到通知。更新答案（如果需要），然后对问题发表评论。

【解决方案2】：

试试这个（为我工作）：

function fun()
{
    var ex = document.getElementById("example");
    alert(ex.getAttribute('listValue'));
}

编辑
添加小提琴：http://jsfiddle.net/FranWahl/Ur6jT/2/
（不知道为什么它对你不起作用。在小提琴中它起作用了。）

【讨论】：

我加了一个小提琴。在小提琴中，代码在页面加载时执行，因为我没有列表的项目，但你可以看到它显示了属性的值。
ya 它在小提琴中工作正常，但我无法弄清楚我的代码有什么错误。
正如Quaternion 在您帖子的评论中提到的，如果您可以显示相关标签的渲染 HTML。可能是范围问题，或者属性可能无法呈现。

【解决方案3】：

我遇到了同样的问题，其他答案都不适合我。这是我发现有效的解决方案：

    $(document).ready(function(){
        $("#example").change(function(){
            var options = document.getElementById("example").options; 
            var selectedIndex = document.getElementById("example").selectedIndex; 
            var selectedOptionText = options[selectedIndex].text;
            var selectedOptionValue = options[selectedIndex].value;
            console.log("Id of selected option is: " + selectedOptionValue);
            console.log("Text of selected option is: " + selectedOptionText);   
        });
    });

为了进一步理解这个问题，考虑一下在处理 JSP 时会创建什么 HTML 会有所帮助。 <s:select> 将生成以下 HTML：

<select id="example" name="example">
    <option value="456">TextA</option>
    ...
</select>

按照 OP 的示例代码，“456”将派生自 exampleKey，“TextA”将派生自 exampleValue。 exampleList 中的每个项目都会有这样的 HTML <option>。

请注意，在我的解决方案中，我使用了 jQuery .change() 函数。但是，我也尝试了onchange="fun()" 的解决方案，就像 OP 所做的那样，这也很有效。

当我尝试用$("#example") 替换document.getElementById("example") 时，解决方案不起作用。

在 <select> 选项 selectedValue 上阅读 this reference 也很有帮助。

【讨论】：