Question

我正在使用数据库中的脚本填充选择选项表单。现在我想要做的是如果用户更改选项示例选择匹配1然后我将在另一个PHP文件上运行一些东西来填充div与匹配1中的详细信息。如果我不使用脚本填充选择选项，它运行正常。虽然当我使用脚本时，选项正确，但在更改时没有任何反应。

标头上的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>

Answer 1

问题是，当您添加新的选择时，您将松开绑定到它的所有事件。

所以你应该将$('#roundselect').change(function()...置于加载成功函数中，如下所示：

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);
            });
        });  

 });

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

1 个答案: