选定选项

Question

选定选项

c#jqueryvisual-studio-2013asp.net-mvc-5.2

3

视图

@Html.DropDownList("DeptId", null, "-- Select --", htmlAttributes: new { @class = "form-control", @onchange = "changeDept(this)" })

Javascript函数

function changeDept(ddl) {
    var lastValue = $(ddl).data('lastValue');
    var newValue = $(ddl).val
    var t = $(ddl + ' option:selected').text();

    if (confirm("Are you sure you want to change from " + $(this).data('lastText') + " to " + ($(this) + 'option:selected').text() + "?")) {
        $(this).data('lastValue', newValue);
    }
    else {
        $(this).val(lastValue);
    }
};

function selectDept(ddl) {
    $(this).data('lastText', $($(this) + ' option:selected').text());
    $(this).data('lastValue', $(this).val());
};

原始功能：

dept.change(function (e) {
    var lastValue = $(this).data('lastValue');
    var newValue = $(this).val();

    if (confirm("Are you sure you want to change from " + $(this).data('lastText') + " to " + $('#DeptId option:selected').text() + "?")) {
        $(this).data('lastValue', newValue);
    }
    else {
        $(this).val(lastValue);
    }
});
dept.each(function () {
    //Store old value
    $(this).data('lastText', $('#DeptId option:selected').text());
    $(this).data('lastValue', $(this).val());
});

第二种方法（原始函数）可行，但我想让我的函数更通用，换句话说，我想将其用于至少5个视图，这样我就不需要为每个视图传递选择器参数而编写5个功能。如何配置第一种形式（第一个函数）使其起作用？

@Html.DropDownList("DeptId", null, "-- Select --", htmlAttributes: new { @class = "form-control", @onchange = "onChange(this)", @onblur = "onBlur(this)" })

function onChange(ddl) {
    var $ddl = $(ddl);
    var lastText = $ddl.data('lastText');
    var lastValue = $ddl.data('lastValue');
    var newText = $ddl.find(':selected').text();
    var newValue = $ddl.val();
    var bool = false;

    if (lastText === undefined) {
        bool = true;
    }

    else if (!confirm("Are you sure you want to change from " + lastText + " to " + newText + "?")) {
        bool = true;
    }

    else {
        bool = false;
        $ddl.val(lastValue);
    }

    if (bool) {
        $ddl.data('lastValue', newValue);
        $ddl.data('lastText', newText);
    }
};
function onBlur(ddl) {
    var selectedOption = ddl.options[ddl.selectedIndex];
    $(ddl).data('lastText', selectedOption.text).data('lastValue', selectedOption.value);
};

我的选择：

<div class="col-md-10">
   <select class="form-control" id="DeptId" name="DeptId" onblur="onBlur(this)" onchange="onChange(this)">
       <option value="">-- Select --</option>
       <option value="1">Clothing</option>
       <option value="2">Eletronics</option>
       <option value="3">Housewares</option>
       <option value="4">Technology</option>
       <option value="5">Accessories</option>
       <option value="6">Perfumary</option>
    </select>
</div>

- developer033

1

语句 var newValue = $(ddl).val 缺少括号 () 结尾。 - Satpal

如果我是你，我会坚持使用现有的函数。因为我从不推荐丑陋的内联事件处理程序。你可以使用简单的 for 循环。 - Satpal

$($(this) + ' option:selected').text()并不是你想象中的那样。请将其更改为$('option:selected', $(this)).text()。 - phuzi

我需要帮助，关于如何检索我在onBlur函数中保存的数据，你能帮我吗？ - developer033

@developer033，那么，你想要使用jQuery吗？ - Grundy

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Grundy · Accepted Answer

当您在内联html中使用处理程序时，它们在全局上下文中调用，因此函数内部的this指向全局对象，在这种情况下是window。因此，您需要使用传递的参数来替换this关键字。

function OnChange(ddl) {
  var $ddl = $(ddl);
  var lastValue = $ddl.data('lastValue');
  var newText = $ddl.find(':selected').text();
  var newValue = $ddl.val();

  if (confirm("Are you sure you want to change from " + $ddl.data('lastText') + " to " + newText + "?")) {
    $ddl.data('lastValue', newValue);
    $ddl.data('lastText', newText);
  } else {
    $ddl.val(lastValue);
  }

}

function onBlur(ddl) {
  var selectedOption = ddl.options[ddl.selectedIndex];
  $(ddl).data('lastText', selectedOption.text).data('lastValue', selectedOption.value);

};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select onchange="OnChange(this)" onblur="onBlur(this)">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
</select>

使用禁用的UPDATE操作

function onChange(ddl) {
  var $ddl = $(ddl);

  var lastText = $ddl.data('lastText'),
    newText = $ddl.find(':selected').text();

  if (!lastText || confirm("Are you sure you want to change from " + lastText + " to " + newText + "?")) {
    $ddl.data('lastValue', $ddl.val());
    $ddl.data('lastText', newText);

  } else {
    $ddl.val($ddl.data('lastValue'));
  }


}

function onBlur(ddl) {
  var selectedOption = ddl.options[ddl.selectedIndex];
  $(ddl).data('lastText', selectedOption.text).data('lastValue', selectedOption.value);

};

$('select [value=""]').attr("disabled", "disabled");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="DeptId" name="DeptId" onblur="onBlur(this)" onchange="onChange(this)">
  <option value="">-- Select --</option>
  <option value="1">Clothing</option>
  <option value="2">Eletronics</option>
  <option value="3">Housewares</option>
  <option value="4">Technology</option>
  <option value="5">Accessories</option>
  <option value="6">Perfumary</option>
</select>

更新2： 看来您不需要blur处理程序，因为在某些浏览器（如IE）中，当显示confirm选择时，失去焦点并引发blur处理程序，并在确认之前保存已选定的值。

function onChange(ddl) {
  var $ddl = $(ddl);

  var lastText = $ddl.data('lastText'),
    newText = $ddl.find(':selected').text();

  if (!lastText || confirm("Are you sure you want to change from " + lastText + " to " + newText + "?")) {
    $ddl.data('lastValue', $ddl.val());
    $ddl.data('lastText', newText);

  } else {
    $ddl.val($ddl.data('lastValue'));
  }


}

$('select [value=""]').attr("disabled", "disabled");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="DeptId" name="DeptId" onchange="onChange(this)">
  <option value="">-- Select --</option>
  <option value="1">Clothing</option>
  <option value="2">Eletronics</option>
  <option value="3">Housewares</option>
  <option value="4">Technology</option>
  <option value="5">Accessories</option>
  <option value="6">Perfumary</option>
</select>