Question

<?php
        //connect to database
          $conn = mysqli_connect("localhost", "root", "", "inventory");

          if(mysqli_connect_errno($conn)) { 
            echo "Unable to connect to database server";
          }    

          //query database for items to populate
          $sql = "SELECT ITEM_NAME, ITEM_ID FROM item";
          $query = mysqli_query($conn, $sql);

          echo '<input type="text" id="item1" list="itemname1"/>';
          echo '<datalist id="itemname1" name="itemr1" onchange="showitem1(this.value); showecost1(this.value); showuom1(this.value);">'; //change select to datalist
          echo '<option value="">Select item</option>';

          while($selectedItem = mysqli_fetch_assoc($query)) {
            echo "<option value='".$selectedItem['ITEM_NAME']."'>{$selectedItem['ITEM_ID']}</option>";
          }

          echo '</datalist>'; //change select to datalist

          if (isset ($_POST['submit'])) {
          $selectedItem = $_POST['desc1'];
          }

        ?>

我有这些代码从数据库调用数据并将其显示给datalist，但问题是onchange事件不起作用，它应该通过从datalist中选择数据自动显示其他数据。如果我只是使用select标签，它正在工作，但我想使用datalist，以便用户可以输入不在数据库中的数据。感谢。

这是JS代码。

<script>
 function showitem1(str) {
 if (str=="") {
 document.getElementById("desc1").innerHTML="";
 return;
} 
if (window.XMLHttpRequest) {
 // code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 } else { // code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
     document.getElementById("desc1").innerHTML=xmlhttp.responseText;
   }
 }
  xmlhttp.open("GET","gethint.php?a="+str,true);
  xmlhttp.send();

  }

 function showecost1(str) {
  if (str=="") {
   document.getElementById("ecost1").innerHTML="";
   return;
 } 
  if (window.XMLHttpRequest) {
   // code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp1=new XMLHttpRequest();
 } else { // code for IE6, IE5
   xmlhttp1=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp1.onreadystatechange=function() {
   if (xmlhttp1.readyState==4 && xmlhttp1.status==200) {
     document.getElementById("ecost1").innerHTML=xmlhttp1.responseText;
   }
 }
 xmlhttp1.open("GET","gethint1.php?b="+str,true);
 xmlhttp1.send();

 }

 function showuom1(str) {
  if (str=="") {
   document.getElementById("uom1").innerHTML="";
   return;
 } 
 if (window.XMLHttpRequest) {
   // code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp2=new XMLHttpRequest();
 } else { // code for IE6, IE5
   xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
 }
  xmlhttp2.onreadystatechange=function() {
   if (xmlhttp2.readyState==4 && xmlhttp2.status==200) {
     document.getElementById("uom1").innerHTML=xmlhttp2.responseText;
   }
 }
 xmlhttp2.open("GET","gethint2.php?c="+str,true);
 xmlhttp2.send();

 }
     </script>

Answer 1

您可以使用输入事件

$(document).on('change', 'input', function(){
    var options = $('datalist')[0].options;
    var val = $(this).val();
    for (var i=0;i<options.length;i++){
       if (options[i].value === val) {
          alert(val);
          break;
       }
    }
});

输入事件比datalist元素有更好的支持，如果你已经使用了datalist元素，确实没有理由不使用它。

Onchange不适用于Datalist

1 个答案: