2

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

<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. 其次，我想在表单上显示所选项目。

我应该如何接近？

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

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

1 回答 1

4

假设您有以下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

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

于 2013-04-12T07:25:53.427 回答