如何在 ajax 成功时恢复原始选择选项值？

Question

我在提交 ajax 表单时将选择选项值更改为其标签文本，但我想在 ajax 成功时将其重置为原始值。

这是我在提交时修改选择的方式。

  jQuery("select option").val(function(){
    return $(this).text();
  });

P.S 我不能使用 location.reload();

Answer 1

您可以使用.data() 存储这些值，然后在需要时恢复它们。

示例（没有实际的 ajax 调用，但应该给你的想法）：

$(function() {
  $('form').on('submit', function (e) {
    e.preventDefault();
    
    var $options = $(this).find('select option');
    
    $options.val(function () {
      $(this).data('value', $(this).val());
      return $(this).text();
    });
    
    console.log($options.eq(0).val());
    console.log($options.eq(1).val());
    
    // ... Ajax stuff goes here ...
    
    // On ajax success:
    $options.val(function () {
      return $(this).data('value');
    });
    
    console.log($options.eq(0).val());
    console.log($options.eq(1).val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <select>
    <option value="1">one</option>
    <option value="2">two</option>
  </select>
  
  <button>submit</button>
</form>

无关说明：通常建议使用比这更具体的选择器。您可以使用类，但我建议使用 data- 属性本身作为选择器（为 CSS 留下类）。