Question

以下脚本是第一次触发，但不能处理五个选择下拉列表的更改。请指导第一次代码无法正常工作的原因，以及是否可以优化此代码。

<script>
             $(document).ready(function(){  
                $('#cfy1').change(function() {
                        var selectedOption = $('#cfy1 option:selected');
                        $('#show_finyear').html(selectedOption.val());
                });
                $('#cmd2').change(function() {
                        var selectedOption = $('#cmd2 option:selected');
                        $('#show_commandName').html(selectedOption.val());
                });
                $('#Stn3').change(function() {
                        var selectedOption = $('#Stn3 option:selected');
                        $('#show_stationName').html(selectedOption.val());
                });
                $('#status4').change(function() {
                        var selectedOption = $('#status4 option:selected');
                        $('#show_statusList').html(selectedOption.val());
                });
                $('#cfa5').change(function() {
                        var selectedOption = $('#cfa5 option:selected');
                        $('#show_cfaList').html(selectedOption.val());
                });
                var finyear     = $("#show_finyear").html();
                var cmdname     = $("#show_commandName").html();
                var stnname     = $("#show_stationName").html();
                var statusname  = $("#show_statusList").html();
                var cfaname     = $("#show_cfaList").html();
                $.ajax({  
                        url:"get_value.php",  
                        method:"POST",  
                        data:{finyear:finyear,cmdname:cmdname,stnname:stnname,statusname:statusname,cfaname:cfaname},  
                        success:function(data){  
                             $('#recordsfromraky').html(data);
                        }  
                });

            });  

        </script>

请不要否定投票。有许多人可以使用这些类型的位。谢谢。

Answer 1

很可能您已理解这个概念 - 您需要在处理程序的每个中调用ajax。

以防万一 -

    <script>
         var fetchChange = function(){
                var finyear     = $("#show_finyear").html();
                var cmdname     = $("#show_commandName").html();
                var stnname     = $("#show_stationName").html();
                var statusname  = $("#show_statusList").html();
                var cfaname     = $("#show_cfaList").html();
                $.ajax({  
                        url:"get_value.php",  
                        method:"POST",  
                        data:{finyear:finyear,cmdname:cmdname,stnname:stnname,statusname:statusname,cfaname:cfaname},  
                        success:function(data){  
                             $('#recordsfromraky').html(data);
                        }  
                });
            };

            $(document).ready(function(){  
            $('#cfy1').change(function() {
                    var selectedOption = $('#cfy1 option:selected');
                    $('#show_finyear').html(selectedOption.val());
                    fetchChange();
            });
            $('#cmd2').change(function() {
                    var selectedOption = $('#cmd2 option:selected');
                    $('#show_commandName').html(selectedOption.val());
                    fetchChange();
            });
            $('#Stn3').change(function() {
                    var selectedOption = $('#Stn3 option:selected');
                    $('#show_stationName').html(selectedOption.val());
                    fetchChange();
            });
            $('#status4').change(function() {
                    var selectedOption = $('#status4 option:selected');
                    $('#show_statusList').html(selectedOption.val());
                    fetchChange();
            });
            $('#cfa5').change(function() {
                    var selectedOption = $('#cfa5 option:selected');
                    $('#show_cfaList').html(selectedOption.val());
                    fetchChange();
            });

        });  

    </script>

我还建议在进行ajax调用时暂时禁用选择。

Answer 2

这是基于dev8080的指导和帮助

<div id="container">
  <div class="item">Five : <span id="s5" class="rs">99 </span></div>
  <div class="item">One : <span id="s1" class="rs">400</span></div>
  <div class="item">Four : <span id="s4" class="rs">1096</span></div>
  <div class="item">Two : <span id="s2" class="rs">1200</span></div>
  <div class="item">Three : <span id="s3" class="rs">5000</span></div>
</div>
<button>Re order me</button>

更改select选项后，代码无法处理onchange事件

2 个答案: