Question

我有一个表单，我必须从下拉菜单中选择一个项目并在表单上显示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. onchange onclick不起作用。 2.其次，我想在表格上显示所选项目。

我应该怎样接近？

编辑：我甚至尝试了以下但它根本不起作用。

    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>

Answer 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，在生成的选择＆amp;之后放置以下。标签：

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

修改

在你的情况下，标记应该是（no onChange）：

<aui:select id="empName" name="empName" >  </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

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

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

1 个答案: