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 POST或GET请求以从数据库中检索数据，并且需要使用document.createElement("elementtype");创建要添加到其中的元素您的页面。

使用jQuery，您的AJAX看起来像这样：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$.ajax({
type: "POST",//can be GET or POST
url: "yoururl",
statusCode: {
404: function() {
  alert( "page not found" );
},
data: {key: value},//you can have multiple keys and values
success: function(res){
    //add elements to the page
    $('#yourelememntid').html(res.someattribute);
}
}).done(function() {
//AJAX request finished
});
</script>

Answer 2

您可以使用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'属性，因为这样更好。随便问...

Answer 3

有几种方法可以实现此目的。一种是使用jquery库提供的功能。

这里只是一些非常粗糙的步骤：

在您的razzaChanged（）函数中，确定选择哪个值：

function razzaChanged()
{
     var val = $('select[name="razza"] option:selected').val();
     // step 2 here
}

现在使用此值在AJAX的帮助下从服务器获取数据：

$.ajax({
    type: "GET",
    url: '/your-url-to-call',
    data: 'your_value=' + val,
    success: function(data) {
        // step 3 here
    }
});

现在具有来自服务器的数据（即json格式）来构建新的选择下拉列表，即：

var newSelect = $('<select>').appendTo('body');
$(data).each(function() {
    newSelect.append($("<option>").attr('value', this.some_property).text(this.some_text));
});

这绝对不是现成的代码，因为您必须确保在服务器端返回格式正确的数据或相应地更改代码。也确保已加载jquery库且代码已包装好ready函数（可在Internet上轻松找到示例）。希望这可以帮助。

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

3 个答案:

HTML

Javascript