How to refresh a value based on a drop down selection code igniter

Question

I'm making a chart based on a drop down selection in code igniter, but I'm getting problems with refreshing the value after I select a drop down list.

I'm using onchange but it seems not to be working.

<form>
  <select class="form-control btn-primary" id="sel1" onchange="window.setTimeout(function(){ document.location.reload(true); }, this.options[this.selectedIndex].value);">
    <option value = "1">Layanan</option>
    <option value = "2">Hasil</option>
    <option value = "3">Waktu</option>
    <option value = "4">Biaya</option>
  </select>
</form>

var temp = document.getElementById("sel1").value;

The refresh page is working, but the value is not changing. It keeps getting back to the first selection. Any ideas?

Answer 1

As a solution (may not suit for your case): You need to pass parameter query along with window location string, but you should set an event listener for window load event:

HTML:

<select class="form-control btn-primary" id="sel1" onchange="reloader();">
            <option value = "1">Layanan</option>
            <option value = "2">Hasil</option>
            <option value = "3">Waktu</option>
            <option value = "4">Biaya</option>
</select>

Javascript:

function reloader(){
var param = document.getElementById('sel1').value;
var ref = window.location.href.split('?')[0];
if (param)
    window.location.href = ref + "?sel1="+param;
}

window.addEventListener('load', function() {
    var query = window.location.href.split('?')[1];
    if (query) {
        var qval = query.split('=')[1];
        document.getElementById('sel1').value = qval;
    } else {
        document.getElementById('sel1').value = 1;
    }
});

Answer 2

Try to use the https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Property/selectedIndex

It will help you select the desired option.

Something like this

document.getElementById("sel1").selectedIndex = 2;