Reset select value to default
You can make use of the defaultSelected
property of an option element:
Contains the initial value of the
selected
HTML attribute, indicating whether the option is selected by default or not.
So, the DOM interface already keeps track which option was selected initially.
$("#reset").on("click", function () {
$('#my_select option').prop('selected', function() {
return this.defaultSelected;
});
});
DEMO
This would even work for multi-select elements.
If you don't want to iterate over all options, but "break" after you found the originally selected one, you can use .each
instead:
$('#my_select option').each(function () {
if (this.defaultSelected) {
this.selected = true;
return false;
}
});
Without jQuery:
var options = document.querySelectorAll('#my_select option');
for (var i = 0, l = options.length; i < l; i++) {
options[i].selected = options[i].defaultSelected;
}
HTML reset dropdown select menu to default value
Once option selected, .select-options
is hidden by .next('ul.select-options').hide();
You need to show it again on .resetbtn
click
$('.resetbtn').click(function() {
$('.select-styled').html("<a>choose a number</a>");
});
Reset Select Menu to default in the on change event
If you're just trying to reset the select element back to a default value, there's a couple ways to do it. Here's is one way that will work:
https://jsfiddle.net/mswilson4040/gnLkyexa/5/
<select placeholder="Select a value..." id="new-effect">
<option selected value="add" class="default-selection">Add New Effect</option>
<option value="waves">Waves</option>
<option value="spiral">Spiral</option>
</select>
const defaultOption = $('#new-effect').find('.default-selection');
$('#new-effect').change(e => {
const value = $('#new-effect').val();
console.log(value);
$('#new-effect').val(defaultOption.val());
});
Basically, you need to capture the default value that you want to reset everytime. Once you have that, in your change event, obtain the selected value and do what you need to with it. After that is done, you can then just set the select dropdown back to the value you need it to.
The selected
attribute in the HTML is fine to have for the initial render, but that will go away once someone changes the value (which is why you can't rely on it for everything).
how to reset values of select dropdown
If I understood correctly, you want change the selected option back to default one. To do so, you can do the following:
document.getElementById('books').selectedIndex = 0;
This is just a basic example, where the selected option is switched back to the first one. To do somewhat more advance reset, you could add data-default-index
attribute to the rendered select and use that value to reset it back. This way you could use a non-first element as a default one.
Cheers.
Reset the Value of a Select Box
I presume you only want to reset a single element. Resetting an entire form is simple: call its reset method.
The easiest way to "reset" a select element is to set its selectedIndex
property to the default value. If you know that no option is the default selected option, just set the select elemen'ts selectedIndex property to an appropriate value:
function resetSelectElement(selectElement) {
selecElement.selectedIndex = 0; // first option is selected, or
// -1 for no option selected
}
However, since one option may have the selected attribtue or otherwise be set to the default selected option, you may need to do:
function resetSelectElement(selectElement) {
var options = selectElement.options;
// Look for a default selected option
for (var i=0, iLen=options.length; i<iLen; i++) {
if (options[i].defaultSelected) {
selectElement.selectedIndex = i;
return;
}
}
// If no option is the default, select first or none as appropriate
selectElement.selectedIndex = 0; // or -1 for no option selected
}
And beware of setting attributes rather than properties, they have different effects in different browsers.
select dropdown option set to default when click reset button on react js
You need to bind the selected value to select
element.
- Provide
categoryID
as a prop to your component. - Set it as the
value
property ofselect
.
<select
...
...
value={props.categoryID}
onChange={e => handleCategory(e.target.value)}
></select>
reset select option while dependencies is default
Does this solve your problem? You should check that selected value exists in faculties
object before anything else
const faculties = {
1: ["Magister Manajemen", "Magister Teologi"],
2: ["Ilmu Filsafat"],
3: ["Pendidikan Agama", "Pendidikan Bahasa Inggris", "Pendidikan Ekonomi", "Pendidikan Luar Sekolah"],
4: ["Akuntansi", "Manejemen"],
5: ["Agroteknologi"],
6: ["Informatika", "Sistem Informasi"],
7: ["Profesi Ners", "Keperawatan"],
8: ["Sekretari D3"],
};
let facultySelection = document.querySelector("#faculty");
let prodiSelection = document.querySelector("#pStudy");
facultySelection.addEventListener("change", (event) => {
const val = event.target.value;
if ( !val || !faculties[val] ) {
pStudy.innerHTML = `<option value="0">-- SELECT PROGRAM STUDY --</option>`;
return;
}
let prodies = faculties[val];
pStudy.innerHTML = prodies.map((p) => `<option value="${p}">${p}</option>`).join("");
});
<div class="mb-3">
<label for="faculty">Faculty</label>
<select class="form-select mt-2" id="faculty" name="faculty">
<option value="0" selected="selected">--SELECT FACULTY --</option>
<option value="1">Pascasarjana</option>
<option value="2">Fakultas Filsafat</option>
<option value="3">Fakultas Keguruan dan Ilmu Pendidikan</option>
<option value="4">Fakultas Ekonomi dan Bisnis</option>
<option value="5">Fakultas Pertanian</option>
<option value="6">Fakultas Ilmu Komputer</option>
<option value="7">Fakultas Keperawatan</option>
<option value="8">Akademi Sekretari Manajemen Indonesia Klabat</option>
</select>
</div>
<div class="mb-3">
<label for="pStudy">Program of Study</label>
<select class="form-select mt-2" id="pStudy" name="pStudy">
<option value="0" selected>--SELECT PROGRAM OF STUDY --</option>
</select>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
Related Topics
Angularjs: Better Way to Watch for Height Change
How to Detect a Long Touch Pressure with JavaScript for Android and Iphone
Search and Highlight in Jquery
Links in <Select> Dropdown Options
Uploading Multiple Files to Google Drive with Google App Script
Performance Differences Between Visibility:Hidden and Display:None
Jquery (Almost) Equivalent of PHP's Strip_Tags()
Dashed Border Animation in CSS3 Animation
How to Handle <Tab> in Textarea
Remove Whitespaces Inside a String in JavaScript
JSON Object Undefined in Internet Explorer 8
Sort an HTML List with JavaScript
Populate One Dropdown List Based on the Selection of Other Dropdown List
Vuejs Error: the Client-Side Rendered Virtual Dom Tree Is Not Matching Server-Rendered
HTML Input Type=File, Get the Image Before Submitting the Form