javascript - 添加第二个触发器来运行

Question

我目前有这个...

var phpArray = <?php echo json_encode($tourdistance['tourdistance']); ?>;
$('#tour').on('change', function (event) {
$('#distance').val(phpArray[$(this).val()]);
});

...当下拉“游览”更改时更新输入元素“距离”。当表单提交时，出现验证错误，我设置了 HTML/PHP，以便它记住用户对该字段的选择。但是，除非他们重新选择该下拉元素，否则不会触发上述内容。这是一种很差的用户体验，因为从视觉上看它看起来是正确选择的。

我怎样才能在页面加载时更新它，或者进行其他设置，以便即使在页面加载后，“距离”也能保持更新？

这是页面...

http://antipodecycling.com/donate-support/sponsor-us/

当前解决方案:

var phpArray = <?php echo json_encode($tourdistance['tourdistance']); ?>;

$(document).ready(function(){
   function updateSelect(){
       var selectInput = $("#tour");
       var distance = phpArray[selectInput.val()];
       $('#distance').val(distance);
    }
    updateSelect();

    function updatePledge(){
       var pledge = "<?php echo set_value('pledge'); ?>";
       $('#pledge').val(pledge);
    }
    updatePledge();


   $("#tour").on('change', function(){
        updateSelect();
   });
});

Answer 1

抽象更新函数，然后调用两个不同的事件:文档就绪和选择更改。

$(document).ready(function(){

   function updateSelect(){

       alert('update select fired');

       var selectInput = $("#tour");

       var distance = phpArray[selectInput.val()];
       alert(distance);

       $('#distance').val(distance);
       $('#pledgedistance').html(distance);
    }

   updateSelect();

   $("#tour").on('change', function(){
        updateSelect();
   });
});