Question

我目前有这个......

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

...更新输入元素＆＃39;距离＆＃39;当一个下拉游览＆＃39;改变了。提交表单时，如果验证错误，我会设置HTML / PHP，以便记住用户对该字段的选择。但是，除非重新选择该下拉元素，否则不会触发上述内容。这是一种糟糕的用户体验，因为它在视觉上看起来会被正确选择。

我怎样才能让它在页面加载时更新，或以其他方式设置以便“距离”＃39;即使在页面加载后仍保持更新？

这是页面......

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

如何在页面加载
上更新它

页面加载时只有trigger事件：

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

Answer 2

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

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

添加第二个触发器以起作用

2 个答案: