Question

我正在尝试使用AJAX填充下拉列表并尝试获取选择下拉列表的文本字段以及该选择的值。我收到的文字只有预选的文字。如果我在第二个下拉列表中更改选择，则与该值对应的文本不会更改。这是我尝试过的 -

     < 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>

更新代码 -

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

尝试将更改事件添加到第二个选择：

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

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

1 个答案: