Question

我有两个相同的表单在不同的页面上。

Page 1

此页面上的表单是一个快速号召性用语，可以说是预先填写下一页的表单。

<form action="/xxxx" method="post">
    <select id="island" name="island">
        <option selected value="base">Select an Island</option>
        <option value="north-island">North Island</option>
        <option value="south-island">South Island</option>
    </select>
</form>

第2页

目前，我可以使用以下内容填写下面的表格：

<select id="island" name="island">
    <option value="base">Select an Island</option>
    <option <?php if( isset($_POST['island']) ) { echo 'selected'; } ?> value="north-island">North Island</option>
    <option <?php if( isset($_POST['island']) ) { echo 'selected'; } ?> value="south-island">South Island</option>
</select>

现在，我遇到的问题是我使用AJAX来检索数据，如果我使用表格，就可以正常工作，但是从第1页到第2页它不会选择 .change ，因此结果不显示。

$('#island').change(function() {
    var selectedValue = $(this).find(':selected').val();
    jQuery.ajax({
        type: 'POST',
        data: {
            action: 'cfd_map',
            option: selectedValue
        },
        url: "xxxxxx",
        success: function(data) {
            $('.results').html(data).fadeIn('slow');
        }
    });
});

有人帮助我吗？

干杯

Answer 1

如果results只需从第1页到第2页可用，而不是从第2页返回到第1页，那么以下内容将有效：

$('#island').change(function() {

  var selectedValue = $(this).val();
  // only do ajax if there is a value
  if (selectedValue) {
    jQuery.ajax({
      type: 'POST',
      data: {
        action: 'cfd_map',
        option: selectedValue
      },
      url: "xxxxxx",
      success: function(data) {
        $('.results').html(data).fadeIn('slow');
      }
    });
  }
  // now trigger change 
}).change();

它只是在声明处理程序后触发更改。触发更改将使ajax调用获得结果

由于服务器已经在第2页设置了值，因此不需要其他本地存储 - 除非这需要双向工作

两种形式相互作用

1 个答案: