Question

我正在使用此HTML

<select class="task" id="c1740778" name="c1740778" data-default-value="NotStarted">
<option value="NotStarted" selected="selected">NotStarted</option>
<option value="Complete">Complete</option>
</select>

以及更改选择时调用的以下Javascript

if (confirm('Are you sure you want to save ?')) {
   console.log("complete changed");
} else {
   console.log("Reset");
}

如果用户取消，如何将选择返回到原始状态？

我试过了

$(this).get(0).val("default-value");

但它不起作用。

有什么建议吗？

Answer 1

尝试$(this).val("NotStarted");

$('#c1740778').change(function(){
  if (confirm('Are you sure you want to save ?')) {
   console.log("complete changed");
  } else {
     $(this).val("NotStarted");
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="task" id="c1740778" name="c1740778" data-default-value="NotStarted">
<option value="NotStarted" selected="selected">NotStarted</option>
<option value="Complete">Complete</option>
</select>

Answer 2

您可以在页面加载时将初始状态保存为变量，并在用户取消时将其设置为该值：

＆＃13;

var taskInit = $('.task').val();
$('.task').on('change', function(){

  if (confirm('Are you sure you want to save ?')) {
     console.log("complete changed");
  } else {
     console.log("Reset");
     $(this).val(taskInit);
  }

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="task" id="c1740778" name="c1740778" data-default-value="NotStarted">
<option value="NotStarted" selected="selected">NotStarted</option>
<option value="Complete">Complete</option>
</select>

＆＃13;

Answer 3

如果用户使用

取消确认，您可以设置重置值

document.getElementById("c1740778").value = "NotStarted";

这是演示

function call(){
if (confirm('Are you sure you want to save ?')) {
   console.log("complete changed");
} else {
   document.getElementById("c1740778").value = "NotStarted"
}
}

<select class="task" id="c1740778" onchange="call()" name="c1740778" data-default-value="NotStarted">
<option value="NotStarted" selected="selected">NotStarted</option>
<option value="Complete">Complete</option>
</select>

Answer 4

第一个答案已经提出了这个想法。但是，如果要在select元素上使用数据属性;您可以使用$(el).data("attr-name")方法。

＆＃13;

function reset(){
  if (confirm('Are you sure you want to save ?')) {
      console.log("complete changed");
  } else {
      $("#c1740778").val($("#c1740778").data("default-value"));
      console.log("Reset");
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="task" id="c1740778" name="c1740778" data-default-value="NotStarted">
<option value="NotStarted" selected="selected">NotStarted</option>
<option value="Complete">Complete</option>
</select>


<span onClick="reset()">TestMe</span>

＆＃13;

如何重置HTML选择

4 个答案: