I am having troubles with <select options> tags in HTML.
I am trying to change the value of the select dropdown using jQuery and Javascript so that I can do something in AJAX calls using the selected value of the dropdown. However, upon changing that and then I would like to revert back to the old value that I have selected before changing it, there are problems that arise... I can still pick/select values from the dropdown options, but the value displayed in the <select option> button/form box is the last value that I have placed there.
Is there a way for me to fix this? Here is my code below.
//retrieving value of the selected option
var selBlock = $("#block_name option:selected").text();
//changing the value of the selected option from the dropdown to the very first option
$("#block_name").change(function() {
$("#block_name option:first").attr('selected','selected');
}).change();
//changing back the value of the selected option on the dropdown by reverting to the old value saved in selBlock
$("#block_name").change(function(){
$("#block_name").find('option:selected').removeAttr("selected");
document.getElementById('block_name').value = selBlock;
}).change();
This is a way for me to achieve a real-time effect by simply changing the options selected in the dropdown, since changing it will invoke an AJAX call and retrieve new values from the database. I choose not to use SSE or AJAX long polling since I know that it will stress our server.