從下拉菜單中選擇選項時的事件處理

我有一個窗體，其中必須從下拉菜單中選擇一個項目並在窗體上顯示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>

來源

2013-04-12 Seeya K

假設你有下面的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

重要的是要注意，當文檔加載時，select必須已經被渲染，否則腳本將無法工作。

來源

2013-04-12 07:25:53 Matyas

非常感謝Matyas，但我不明白爲什麼它不起作用。我嘗試了你的兩種方法.. 我的意思是它可以作爲純html文件，但是當我嘗試將它包含在我的代碼中時，它不顯示任何內容。我檢查了所有的ID一切看起來正確 –

我不知道你使用的是什麼框架，但在HTML元素的處理程序應該放在** onchange **而不是* onChange * – Matyas

我會試着看看我在哪裏犯錯並讓你知道 –

從下拉菜單中選擇選項時的事件處理

回答

相關問題