Javascript JS on change select选项由另一个脚本填充

我正在使用数据库中的脚本填充选择选项表单。现在 我想做的是，如果用户更改一个选项，示例选择match 1，那么我将在另一个php文件上运行一些东西，用match 1的详细信息填充一个div。 如果我不使用脚本填充选择选项，它将正常运行。虽然当我使用脚本时，选项是正确的，但是在更改时什么也没有发生

标题上的JS

function populateSelect(){
    var load = $.get('popRoundSel.php',{gameNo:"<?php echo $_POST['gameNo']; ?>"});
    $(".round").html('Refreshing');
    load.error(function() {
      console.log("Mlkia kaneis");
      $(".round").html('failed to load');
      // do something here if request failed
    });
    load.success(function( res ) {
      console.log( "Success" );
      $(".round").html('<select id="roundselect"><option>----</option>'+res+'</select>');
    });
    load.done(function() {
      console.log( "Completed" );
    });
}
$(document).ready(function()
    {
        $('#roundselect').change(function()
        {
            var selected = $(this).find(':selected').html();
            $.post('roundinfo_sc.php', {'beverage': selected}, function(data) {
              $('#result').html(data);
            });
        }); 
    });

页面代码

<h2>Select a round to see more details</h2>
<div class="round">
<script>
populateSelect();
</script>
</div>
<div id="result">    
</div>

---

问题是，当您添加新的select时，您会丢失绑定到它的所有事件

因此，您应该将$'roundselect'.changefunction。。。在load succes函数中，如下所示：

load.success(function( res ) {
      console.log( "Success" );
      $(".round").html('<select id="roundselect"><option>----</option>'+res+'</select>');
   $('#roundselect').change(function()
        {
            var selected = $(this).find(':selected').html();
            $.post('roundinfo_sc.php', {'beverage': selected}, function(data) {
              $('#result').html(data);
            });
        });  

 });

一旦人民选出；我将在div中填入--“+res+”