事件时，选项从下拉菜单中选择处理(Event Handling when option is sel

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

<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>

我有一个关于这几个问题：1平变化的onclick不工作。 2.其次我想在表单上显示所选择的项目。

我应该如何看待？

编辑：我甚至尝试了follwing但它不会在所有的工作。

    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>

上面的代码我想显示在非可编辑的文本框中。一旦选定从下拉值应该显示为已存在的单选按钮的价值是什么其实我要的是。一旦此单选按钮的值被设定，它会被用于进一步的处理。

EDITCODE：

  <!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

<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

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