如何使用jQuery从AJAX生成的选择下拉列表中获取文本选项？

Question

I am trying to populate dropdown using AJAX and trying to get the text field of select dropdown along with the value of that selection. I am getting the text but only the preselected text. If i change the selection in second dropdown the text corresponding to the value doesnt change. Here is what i have tried -

  < script type = "text/javascript" > function AjaxFunction() { var httpxml; try { // Firefox, Opera 8.0+, Safari httpxml = new XMLHttpRequest(); } catch (e) { // Internet Explorer try { httpxml = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { httpxml = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return false; } } } function stateck() { if (httpxml.readyState == 4 && httpxml.status == 200) { //alert(httpxml.responseText); var myarray = JSON.parse(httpxml.responseText); // Remove the options from 2nd dropdown list for (j = document.testform.subcat_id.options.length - 1; j >= 0; j--) { document.testform.subcat_id.remove(j); } for (i = 0; i < myarray.data.length; i++) { var optn = document.createElement("OPTION"); optn.text = myarray.data[i].Description; optn.value = myarray.data[i].Component_ID; document.testform.subcat_id.options.add(optn); document.getElementById("des").value = $("#subcat_id option:selected").text(); // here i get the text } } } // end of function stateck var url = "production_add_filter.php"; var cat_id = document.getElementById('cat_id').value; url = url + "?cat_id=" + cat_id; url = url + "&sid=" + Math.random(); httpxml.onreadystatechange = stateck; //alert(url); httpxml.open("GET", url, true); httpxml.send(null); } < /script> 

 <form name="testform" method='POST' action="production_add_exec.php"> <label>Select Category :</label> <select name=cat_id id="cat_id" onchange=AjaxFunction(); required> <option value=''>Select One</option></select> <label>Select Component :</label> <select name=subcat_id id='subcat_id' required> <option value=''>Select One</option> </select> <input id="des" type=text>//updated text value required here ! <input type=submit value=submit> </form> 

Updated code -

for (i=0;i<myarray.data.length;i++)
{
var optn = document.createElement("OPTION");
optn.text = myarray.data[i].Description;
optn.value = myarray.data[i].Component_ID;  
document.testform.subcat_id.options.add(optn);
document.getElementById("des").value = $("#subcat_id option:selected").text();
}
document.getElementById("des").value = $('#subcat_id').change(function() {
 $('#des').val($('#subcat_id option:selected').text());
});

  }
}

Answer 1

try to add change event to second select:

$('#subcat_id').change(function() {
     $('#des').val($('#subcat_id option:selected').text());
});