I'm trying to make a very simple form for searching courses in my school project (www.github.com/SieniMaagi/SPAS). The program itself is made in Java, but the problem I have is with this little JavaScript part that I made, so I can change the get-parameter of selected organization on the fly (another select-part of the form is based on what organization was chosen).
It works just fine before pressing submit, but after you press submit it doesn't let you change the option.
I appreciate anyone taking the time to check this through.
The JavaScript:
<script>
function selectedOrganization() {
var selectElem = document.forms[0].elements["org"];
var value = selectElem[selectElem.selectedIndex].value;
var href = location.href;
if (href.indexOf("org=") !== -1) {
var substr = href.substring(href.indexOf("org=") + 4);
href.replace(substr, value);
} else {
href = href + "?org=" + value;
}
window.location.replace(href);
}
</script>
The HTML:
<select name="org" onchange="selectedOrganization()">
<option value="" selected></option>
.... options with different values .....
</select>
You could do without a full-page-refresh by utilizing data-attributes. When you list your <option> tags in the <select name="dept">, you can add extra information to every option as to which organisation it belongs to. Later on we can utilize this information to dynamically hide the unwanted options.
As this approach will fiddle with DOM, I'd truly suggest you use jQuery to do it. I made a working example that does just that.
Here's the HTML-part, mostly copied from your jsFiddle-example but with a data-org data-attribute added to every <option> of the department selection:
<form name="search" action="search.jsp" method="get">
Avainsana: <input type="text" name="kword" />
<br /> Organisaatio:
<select name="org">
<option value="" >--valitse organisaatio</option>
<option value="CHEM">Kemian tekniikan korkeakoulu</option>
<option value="ECON">Kauppakorkeakoulu</option>
<option value="ELEC">Sähkötekniikan korkeakoulu</option>
<option value="ENG">Insinööritieteiden korkeakoulu</option>
<option value="ERI">Erillinen opetus</option>
<option value="SCI">Perustieteiden korkeakoulu</option>
<option value="TaiK">Taiteiden ja suunnittelun korkeakoulu</option>
</select>
<br /> Osasto:
<select name="dept">
<option value="" >--valitse osasto</option>
<option data-org="CHEM" value="T1010">Biotekniikan ja kemian tekniikan laitos</option>
<option data-org="CHEM" value="T1020">Kemian laitos</option>
<option data-org="CHEM" value="T1030">Materiaalitekniikan laitos</option>
<option data-org="CHEM" value="T1040">Puunjalostustekniikan laitos</option>
<option data-org="CHEM" value="CHEM-0">Korkeakoulun yhteiset kurssit</option>
<option data-org="CHEM" value="ECON-0">Korkeakoulun kurssit</option>
<option data-org="ECON" value="T4010">Automaatio- ja systeemitekniikan laitos</option>
<option data-org="ECON" value="T4020">Elektroniikan laitos</option>
<option data-org="ECON" value="T4030">Mikro- ja nanotekniikan laitos</option>
<option data-org="ECON" value="T4040">Radiotieteen ja -tekniikan laitos</option>
<option data-org="ECON" value="T4050">Signaalinkäsittelyn ja akustiikan laitos</option>
<option data-org="ECON" value="T4060">Sähkötekniikan laitos</option>
<option data-org="ELEC" value="T4070">Tietoliikenne- ja tietoverkkotekniikan laitos</option>
<option data-org="ELEC" value="T4080">Metsähovin radiotutkimusasema</option>
<option data-org="ELEC" value="ELEC-0">Korkeakoulun yhteiset kurssit</option>
<option data-org="ELEC" value="T2020">Energiatekniikan laitos</option>
<option data-org="ELEC" value="T2030">Koneenrakennustekniikan laitos</option>
<option data-org="ELEC" value="T2040">Sovelletun mekaniikan laitos</option>
<option data-org="ENG" value="T2050">Maankäyttötieteiden laitos</option>
<option data-org="ENG" value="T2060">Rakenne- ja rakennustuotantotekniikan laitos</option>
<option data-org="ENG" value="T2070">Yhdyskunta- ja ympäristötekniikan laitos</option>
<option data-org="ENG" value="T2080">Lahden keskus</option>
<option data-org="ENG" value="ENG-0">Korkeakoulun yhteiset kurssit</option>
<option data-org="ENG" value="U91101">Avoin yliopisto</option>
<option data-org="ENG" value="Eri-0">Erilliset kurssit</option>
<option data-org="ENG" value="T3010">Lääketieteellisen tekniikan ja laskennallisen tieteen laitos</option>
<option data-org="ENG" value="T3020">Matematiikan ja systeemianalyysin laitos</option>
<option data-org="ENG" value="T3030">Mediatekniikan laitos</option>
<option data-org="ERI" value="T3040">Teknillisen fysiikan laitos</option>
<option data-org="SCI" value="T3050">Tietotekniikan laitos</option>
<option data-org="SCI" value="T3060">Tietojenkäsittelytieteen laitos</option>
<option data-org="SCI" value="T3070">Tuotantotalouden laitos</option>
<option data-org="SCI" value="T3080">BIT-tutkimuskeskus</option>
<option data-org="SCI" value="T3090">Kielikeskus</option>
<option data-org="SCI" value="SCI-0">Korkeakoulun yhteiset kurssit</option>
<option data-org="SCI" value="T2010">Arkkitehtuurin laitos</option>
<option data-org="TaiK" value="A801">Elokuvataiteen ja lavastustaiteen laitos</option>
<option data-org="TaiK" value="A802">Median laitos</option>
<option data-org="TaiK" value="A803">Muotoilun laitos</option>
<option data-org="TaiK" value="A805">Taiteen laitos</option>
<option data-org="TaiK" value="TaiK-0">Korkeakoulun yhteiset kurssit</option>
</select> <br />
<input type="submit" name="search" value="Hae" />
</form>
<div id="debuginfo"></div>
And this handy-dandy jQuery snippet will do the actual filtering and element removing and all. I added a lot of comments to the code, so you'd understand it better.
// First of all, get a copy of all the <select name="dept"> options.
// This is because we must DELETE those <option> elements to truly
// make them hidden, and we'd like to be able to put those elements
// back, too.
var originalDepartments = $('select[name="dept"]').clone();
// Listen to "change" event for the wanted <select>
$('select[name="org"]').change(function () {
// Store the value of selected organisation to a variable
var chosenOrganisation = $(this).val();
// We have a handy dandy debug-div where we can output something
$("#debuginfo").html('<p>You chose: ' + chosenOrganisation + '</p>');
// Replace the element of <select name="dept"> with the one
// stored to originalDepartments-variable, i.e. reset the state.
$('select[name="dept"]').replaceWith(originalDepartments.clone());
// Loop through every element inside a <select> with name-attribute "dept"
$('select[name="dept"] option').each(function () {
// The current DOM-element is tied to 'this', let's turn it into
// a jQuery object
var $this = $(this);
// Get the data-org attribute to a variable here already.
var dataOrg = $this.attr('data-org');
// If the current data-org was empty, i.e. it wasn't an organisation,
// don't do anything. Returning here means that this callback function
// will exit and then it'll be called again by the each-function with
// a new element as 'this'.
if (!dataOrg) {
return;
}
// Now, if the <option> has a data-attribute "data-org" that is
// not of the same value as the chosen organisation, remove it.
if (dataOrg !== chosenOrganisation && chosenOrganisation !== '') {
$("#debuginfo").append('<div>Removed ' + $this.val() + '</div>');
$this.remove();
}
});
});
And just to really sum it up, here's a fiddle demonsrating all of this in action: http://jsfiddle.net/VesQ/ytXsW/