javascript - 添加由选择更改触发的 HTML 代码

Question

我在 HTML 代码中进行了简单的选择(下拉菜单)。

HTML

<select name="razza" onchange="razzaChanged()">
      <?php while ($row = gdrcd_query($result, 'fetch')){ ?>
         <option value="<?php echo $row['id_razza']; ?>" <?php if(gdrcd_filter('get',$_POST['razza'])==$row['id_razza']){ echo 'SELECTED'; } ?>>
           <?php echo gdrcd_filter('out',$row['nome_razza']); ?>
         </option>
      <?php } ?>

JavaScript

   <script>
    function razzaChanged()
    {
       alert("I am an alert box!");
    }
   </script>

当选择下拉列表时，我必须在下拉列表下方添加一些信息。我必须添加的信息有点复杂，格式也很漂亮(我需要执行一些查询来检索数据，然后在信息后添加文本和另一个下拉列表)。

我怎样才能实现这个目标？我可以通过 JavaScript 注册选择已更改，但随后我不知道如何进一步操作。

Answer 1

您可以使用ajax方法。使用 oninput/onchange 从 select 获取值，将该值用作 ajax 请求中的数据。如果请求成功，则在您想要的容器中显示服务器的响应。

HTML

<select name="razza" id="razza">
<option value="1">Some Option</option>
<option value="2">Another Option</option>
<!-- Use your loop here and remove these options -->
</select>

Javascript

$("#razza").on('input change',function(){
  var value = $(this).val();
  // Ajax Request
  $.ajax({
    type: 'post', // you can also use 'get'
    url: '/link/to/your/server/file',
    data: {
     key: value // use key required by backend
    },
    success: function(response) {
         $('#your-container-div-id').html(response);
    }
  });
});

请注意，我使用了没有“onchange”属性的代码，因为这样更好。欢迎询问...