从下拉菜单中选择选项时的事件处理 [英] Event Handling when option is selected from dropdown menu
问题描述
这是我的代码：
< aui：select id =empNamename =empName onChange =showEmpName（）>
<％
列表<员工> EmpList = EmployeeLocalServiceUtil.getEmployees（-1，-1）;
for（Employee emp：EmpList）{
％>
< aui：option value ='<％= emp.getEmpFname（）％>'name =leaveEmponClick =showEmpName（）><％= emp.getEmpFname（）％> ; <％= emp.getEmpLname（）％>< / AUI：选项>
<％}％>
这是脚本：从下拉列表中选择的值应显示在表单
< 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 =empNamename =empName>
<％
列表<员工> EmpList = EmployeeLocalServiceUtil.getEmployees（-1，-1）;
for（Employee emp：EmpList）{
％>
< aui：option value ='<％= emp.getEmpFname（）％>'name =leaveEmp><％= emp.getEmpFname（）％> <％= emp.getEmpLname（）％>< / AUI：选项>
<％}％>
< / aui：select>
上面的代码我试图在不可编辑的文本框中显示。
我实际想要的是一旦选择了从下拉列表中的值，它应该显示为已经存在的单选按钮的值。一旦设置了此单选按钮的值，它将被用于进一步处理。
编辑：
<！DOCTYPE HTML>
< html>
< head>
< script src =http://code.jquery.com/jquery-1.9.1.min.js>< / script>
< meta http-equiv =Content-Typecontent =text / html; charset = ISO-8859-1>
< title>在此插入标题< / 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 =markAbsentvar =markAbsentURL/>
< aui：form name =markAbsentaction =<％= markAbsentURL.toString（）％> method =post>
< aui：select id =empNamename =empName>
<％
列表<员工> EmpList = EmployeeLocalServiceUtil.getEmployees（-1，-1）;
for（Employee emp：EmpList）{
％>
< aui：option value ='<％= emp.getEmpFname（）％>'><％= emp.getEmpFname（）％> <％= emp.getEmpLname（）％>< / AUI：选项>
<％}％>
< / aui：select>
< label for =empNameid =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，那么你应该可以听
//将一个准备好的监听器附加到文档
$（document）.ready（function（）{//当文档完全加载
//检索由选择器'#mySel'标识的jQuery包装的dom对象
var sel = $（'＃mySel'）;
//为其分配一个更改监听器
sel.change（function（）{//在监听器内
//检索触发事件的对象的值（由此引用）
var value = $（this）.val（） ;
//在日志中打印
console.log（value）; //在IE中崩溃，如果控制台未打开
//使所有标签元素的文本为
$（'label'）。text（value）;
}）; //关闭变更监听器
}）; //关闭准备好的听众
工作示例： 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 。
编辑
在你的情况下，标记应该是（no onChange）：
< aui：select id =empNamename =empName>
<！ - 选项 - >
< / aui：select>
< label id =myUniqueLabelId>< / label>
< script type =text / javascript>
$（document）.ready（function（）{
//将一个监听器分配给一个或多个选择元素，其中包含id
$中的empName（'select [id * = empName] '）.change（function（）{
//当更改事件触发时，我们取所选元素的值
var value = $（this）.val（）;
//获取一个确切的id为myUniqueLabelId的元素，并使其文本为
$（'＃myUniqueLabelId'）。text（value）;
//引用无线电输入
var radio = $（'＃radioId'）;
//使其启用
radio.prop（'checked'，true）;
}）;
}）;
< / script>
使用单选按钮的工作示例：
http://jsbin.com/edamuh/12/edit
重要的是注意，当文档加载时，选择必须已经呈现，否则脚本将无法正常工作。
I have a form wherein I have to select an item from the drop down menu and display the selecetd value on the form. The values in the dropdown menu come from the database. Here is my code of select:
<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>
<% } %>
Here is the script: the value selected from drop down should be displayed on the form
<script>
function showEmpName()
{
var empName = document.getElementById("empName")
var showEmpName = document.getElementById("showEmpName")
showEmpName.value = empName.value
alert("my name is" + empName)
}
</script>
I have a couple of questions regarding this: 1. onchange onclick aren't working. 2. Secondly I want to display the selected item on the form.
How should I approach?
EDIT: I even tried the follwing but it doesn't work at all.
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>
The above code I am trying to display in a non editable text box. What I actually want is once the value from drop down is selected it should be displayed as the value of the radio button which already exists. once the value of this radio button is set, it will be used for further processing.
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>
Say you have the following 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>
And you use jQuery, then you should be able to listen to selections by
// 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
Working example: http://jsbin.com/edamuh/3/edit
Or you could also do it with basic javascript, by putting the following after the generated select & label:
<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>
Working example here: http://jsbin.com/edamuh/7/edit
Note: The latter might not work equally in all browsers. Eg. Works in Firefox(Windows) but might not in others. Thus I'd suggest opting for using jQuery.
EDIT
In your case the markup should be something like (no 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>
Working example with radio buttons: http://jsbin.com/edamuh/12/edit
It is important to notice, that when the document loads the select must have been already rendered, otherwise the script won't work.
这篇关于从下拉菜单中选择选项时的事件处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
