Event Handling when option is selected from dropdo

2019-02-20 02:39发布

站内问答 / Html5
1055 1 2

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>

1条回答
做自己的国王
2楼-- · 2019-02-20 03:30

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)