0

学校のプロジェクト (www.github.com/SieniMaagi/SPAS) でコースを検索するための非常に単純なフォームを作成しようとしています。プログラム自体は Java で作成されていますが、私が抱えている問題は、私が作成したこの小さな Javascript 部分にあるため、選択した組織の get-parameter をその場で変更できます (フォームの別の選択部分は、組織に基づいています)。選ばれた)。

送信を押す前は問題なく機能しますが、送信を押した後はオプションを変更できません。

これを確認するために時間を割いてくれた人に感謝します

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>

HTML:

<select name="org" onchange="selectedOrganization()">
<option value="" selected></option>
.... options with different values .....
</select>
4

2 に答える 2

0

data-attributesを利用することで、ページ全体を更新しなくても済みます。<option>タグを にリストする<select name="dept">と、どの組織に属しているかについて、すべてのオプションに追加情報を追加できます。後でこの情報を利用して、不要なオプションを動的に非表示にすることができます。

このアプローチは DOM をいじるので、jQuery を使用することを強くお勧めします。まさにそれを行う実用的な例を作成しました。

これはHTML-partで、ほとんどが jsFiddle-example からコピーされていますが、すべての部門選択data-orgに data-attribute が追加されています。<option>

<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>

そして、この便利なjQuery スニペットは、実際のフィルタリングと要素の削除などをすべて行います。コードに多くのコメントを追加したので、理解が深まりました。

// 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();
        }
    });
});

そして、本当に要約すると、これらすべてが実際に行われていることを示すフィドルがあります: http://jsfiddle.net/VesQ/ytXsW/

于 2012-12-23T15:41:17.557 に答える
0

あなたの質問の議論から、あなたがしたいことは、組織が変わったときにフォームを送信することのようです。これは、select リストの onchanged イベント中にフォームの submit メソッドを呼び出すことで実現できます。

関数は既に正しく接続されているため (例の jsFiddle から)、関数から submit を呼び出すだけでよいようです。

function selectedOrganization() {
    document.forms[0].submit();
}​
于 2012-12-23T14:32:21.957 に答える