Question

在以下选择框中：

var sval=1;
function foo(v) {
    sval=Number(v);
}
...
<select name="sval" onchange="
   if (confirm('...?')) foo(this.value); else $(this).val(sval);">
  <option value="1">1
  <option value="2">2
  <option value="3">3

想法是确认所选项目的更改。如果未确认更改回旧值。

如果确认返回true，则所有内容均按预期工作
如果确认返回false，则select始终获得值{sval

为什么更改所选项目不能在onchange处理程序内部工作？

编辑：以下基于ejay_francisco答案的代码做了正确的工作：

http://jsfiddle.net/4wCQh/33/

var vals = 1;
$("#svalue").change(function() {
    if (confirm('...?'))
         vals=Number(this.value);
    else
         $(this).val(vals);   
});

但不清楚内联代码$(this).val(sval)将select重置为1

的原因是什么

Answer 1

我已经修改了您的代码，这就是我的完成方式

工作Fiddle：

Javascript：

$( "#svalue" ).change(function() {
    if (confirm('...?')) {
            vals =$('#svalue').val();
     $('#svalue').val(this.options[this.selectedIndex].value);
    }else{
      $('#svalue').val(vals);
    }
});

HTML：

<select id="svalue">
    <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>

已编辑：

这里是如何完成内联的：工作Fiddle

HTML：

<select name="sval" onchange="if (confirm('...?')) {foo(this.value);sval=(this.value);} else $(this).val(sval);">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>

Javascript：

var sval=1;
function foo(v) {
   $('#svalue').val(v);
}

显然您忘记将sval的值更改为用户之前点击的内容。 sval=(this.value);部分的代码为onchange。

Answer 2

尝试

我认为其他部分不是必要的

更改为

<select name="sval" onchange="
   if (confirm('...?')) foo(this.value);">

Answer 3

你的方法绝对可怕。

当你在元素上内联JavaScript事件时，它看起来很丑陋。

为什么要将选择值设置为当前所选值的值？

您可以跳过此$(this).val(sval = this.value;);，只有sval = this.value;

我真的非常喜欢将代码和值保持在最低限度，不需要变量，也不需要代码。

给这一点。

  <script type="text/javascript">

    var sval = 1;
    var foo = function () {

   if(confirm('...?')) {

      $(this).val(sval = this.value);
        }
        else
        {
         $(this).val(sval);
        }
    };

    setTimeout(function () {

        document.getElementById('sval').onchange = foo;
    }, 100);

</script>

<select id="sval">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

Answer 4

我找到了代码无效的原因。

结果是小提琴和浏览器的执行之间存在差异，这使得追踪问题变得更加困难。

在onchange事件的内联代码中，定义了与name="sval"同名的变量，并且因为该名称与全局上下文中的整数变量相同，所以代码没有使用正确的值来改变选择的价值。

从onchange事件内部更改所选项目

4 个答案: