c# - 选定的选项

Question

查看

@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 个 View ，所以我不需要为每个通过选择器参数。如何配置第一个表单(第一个函数)以使其工作？

实际上:

@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>

Answer 1

当您使用内联 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>

更新禁用

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>

UPDATE2: 似乎您不需要blur 处理程序，因为在某些浏览器(如 IE)中，当显示确认时选择失去焦点并提升模糊处理程序，并在确认之前保存已经选择的值。

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>