我有一个表单，其中我必须从下拉菜单中选择一个项目并在表单上显示所选值。下拉菜单中的值来自数据库。 这是我的选择代码:
<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>
对此我有几个问题:
onchangeonclick不起作用。- 其次，我想在表单上显示所选项目。
我应该如何处理？
编辑: 我什至尝试了以下方法，但根本不起作用。
<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
<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
需要注意的是，当文档加载时，选择必须已经呈现，否则脚本将无法工作。
关于html - 从下拉菜单中选择选项时的事件处理，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15964561/