从下拉菜单中选择选项时的事件处理答案

【问题标题】：Event Handling when option is selected from dropdown menu从下拉菜单中选择选项时的事件处理
【发布时间】：2013-04-12 06:29:46
【问题描述】：

我有一个表单，我必须从下拉菜单中选择一个项目并在表单上显示选定的值。下拉菜单中的值来自数据库。这是我的选择代码：

<aui:select id="empName" name="empName" onChange = "showEmpName()">
<%
    List<Employee> EmpList =  EmployeeLocalServiceUtil.getEmployees(-1,-1);
    for(Employee emp : EmpList ) {
    %>
    <aui:option value='<%=emp.getEmpFname()%>' name = "leaveEmp" onClick =   "showEmpName()"><%=emp.getEmpFname()%>  <%=emp.getEmpLname()%></aui:option>

 <% } %>

这里是脚本：从下拉列表中选择的值应该显示在表单上

 <script>
function showEmpName()
{
    var empName = document.getElementById("empName")
    var showEmpName = document.getElementById("showEmpName")
    showEmpName.value = empName.value
    
    alert("my name is" + empName)
}
   </script>

我对此有几个问题：

onchange onclick 不工作。
其次，我想在表单上显示选中的项目。

我应该如何接近？

编辑：我什至尝试了以下方法，但它根本不起作用。

  <script>

    var selectedEmpName = document.getElementById('empName');
    var absentEmp = document.getElementById('absentEmp');
    
    selectedEmpName.onchange = function() {
        absentEmp.value = selectedEmpName.value;
    };
  </script>

                <aui:select id="empName" name="empName">
        <%
            List<Employee> EmpList = EmployeeLocalServiceUtil.getEmployees(-1,-1);
            for(Employee emp : EmpList ) {
        %>
 <aui:option value='<%=emp.getEmpFname()%>' name = "leaveEmp"><%=emp.getEmpFname()%>      <%=emp.getEmpLname()%></aui:option>

<% } %>
    
  </aui:select>

上面的代码我试图在一个不可编辑的文本框中显示。我真正想要的是，一旦选择了下拉列表中的值，它应该显示为已经存在的单选按钮的值。一旦设置了此单选按钮的值，它将用于进一步处理。

编辑代码：

  <!DOCTYPE HTML>
  <html>
  <head>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Insert title here</title>
  <script type="text/javascript">
     $(document).ready(function(){
  $('#empName').change(function(){
    var value = $(this).val();
    console.log(value);
    $('label').text(value);
  });
});
  </script>
 </head>
<body>
 <portlet:actionURL name="markAbsent" var="markAbsentURL" />

<aui:form name="markAbsent" action="<%=markAbsentURL.toString() %>"    method="post" >


<aui:select id="empName" name="empName" >
        <%
            List<Employee> EmpList = EmployeeLocalServiceUtil.getEmployees(-1,-1);
            for(Employee emp : EmpList ) {
        %>
  <aui:option value='<%=emp.getEmpFname()%>'><%=emp.getEmpFname()%>      <%=emp.getEmpLname()%></aui:option>

 <% } %>

    
 </aui:select>

  <label for="empName" id = "labelname"></label>
  </aui:form>

【问题讨论】：

标签： html jquery drop-down-menu jquery-events

【解决方案1】：

假设你有以下html

<select id="mySel">
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
  <option value="d">d</option>
  <option value="e">e</option>
  <option value="f">f</option>
</select>   
<label for="mySel">
</label>

如果你使用了 jQuery，那么你应该可以通过以下方式收听选择

// attach a ready listener to the document
$(document).ready(function(){ // ran when the document is fully loaded
  // retrieve the jQuery wrapped dom object identified by the selector '#mySel'
  var sel = $('#mySel');
  // assign a change listener to it
  sel.change(function(){ //inside the listener
    // retrieve the value of the object firing the event (referenced by this)
    var value = $(this).val();
    // print it in the logs
    console.log(value); // crashes in IE, if console not open
    // make the text of all label elements be the value 
    $('label').text(value);
  }); // close the change listener
}); // close the ready listener

工作示例：http://jsbin.com/edamuh/3/edit

或者您也可以使用基本的 javascript 来完成，方法是在生成的选择和标签之后放置以下：

<script type="text/javascript">
  var sel = document.getElementById('mySel');
  var lbl = document.getElementById('myLbl');
  sel.onchange = function(){
     lbl.innerHTML = this.options[this.selectedIndex].value;
  };
</script>

这里的工作示例：http://jsbin.com/edamuh/7/edit

注意：后者可能无法在所有浏览器中均等地工作。例如。适用于 Firefox(Windows)，但可能不适用于其他浏览器。因此我建议选择使用 jQuery。

编辑

在您的情况下，标记应该类似于（无 onChange）：

<aui:select id="empName" name="empName" >
   <!-- options -->
</aui:select>
<label id="myUniqueLabelId"></label>
<script type="text/javascript">
  $(document).ready(function(){ 
    // assigns a listener to 1 or more select elements that contains empName in their id
    $('select[id*=empName]').change(function(){
      // when the change event fires, we take the value of the selected element(s)
      var value = $(this).val();
      // take an element with the exact id of "myUniqueLabelId" and make its text be value
      $('#myUniqueLabelId').text(value);
      // take the reference to a radio input
      var radio = $('#radioId');
      // make it enabled
      radio.prop('checked', true);
    });
  });
</script>

单选按钮的工作示例： http://jsbin.com/edamuh/12/edit

重要的是要注意，当文档加载时，选择必须已经呈现，否则脚本将无法工作。

【讨论】：

非常感谢 Matyas，但我不明白为什么它不起作用。我尝试了两种方法。我的意思是它可以作为纯 html 文件工作，但是当我尝试将它包含在我的代码中时，它不会显示任何内容。我检查了所有的 id，一切看起来都正确
我不知道您使用的是什么框架，但 html 元素上的处理程序应该放在 onchange 而不是 onChange
我会尝试看看我在哪里犯错并告诉你
我已将我的代码添加为上面的 EDITCODE 供您查看，因为它仍然无法正常工作..
检查呈现的 html 中的 id 是否是您在 jQuery 脚本中引用的那些。有时框架会生成特殊的 ID。可能是 id 是 markAbsent:empName （只是猜测）。 + 确保标签在页面中是唯一的，或者通过它的 id 引用它：$('#labelname')。很高兴看到 html 输出。也许您可以将其粘贴到某处并在此处提供链接。