Selected option

Question

View

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

Javascript function

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());
};

ORIGINAL FUNCTION:

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());
});

The second way (original function) works, but I want make my function generic, in other words, I want to use it for at least 5 views, so I don't need to make 5 function for each view passing the selector parameter. How can I configure the first form (first function) to make it work?

ACTUALLY:

@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);
};

My select:

<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

When you use handlers inline html, they call in global context, so this inside functions refers to global object, in this case: window. So instead this keyword you need use passed parameters

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 with disabled

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: seems like you not need blur handler because in some browsers like IE, when shows confirm select lost focus and raise blur handler, and save already selected value, before confirmed.

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>