Selected option
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 my function to be generic, in other words, I want to use it for at least 5 views, so I don't have to do 5 functions for each view passing through the selector parameter. How do I set up the first form (first function) to 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 choice:
<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>
+3
source to share
1 answer
When you use inline html handlers, they call the global context, so this
inside functions refers to the global object, in this case: the window. So instead of a keyword this
you need to use the 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: It seems like you don't need a blur handler because in some browsers like IE when shows confirm the lost focus selection and raise the handler blur and keep the already selected value before confirming.
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>
+2
source to share