0

我正在尝试制作一个非常简单的表格来搜索我的学校项目（www.github.com/SieniMaagi/SPAS）中的课程。程序本身是用 Java 制作的，但我遇到的问题是我制作的这个小 Javascript 部分，所以我可以动态更改所选组织的获取参数（表单的另一个选择部分基于什么组织被选中）。

在按下提交之前它工作得很好，但是在你按下提交之后它不会让你改变选项。

我感谢任何花时间检查的人

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

从对您的问题的讨论来看，您想要做的是在组织发生变化时提交您的表单。这可以通过在选择列表的 onchanged 事件期间调用表单的提交方法来完成。

您已经正确连接了函数（来自您提供的示例 jsFiddle），因此您似乎真正需要做的就是从您的函数调用提交。

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

您可以通过使用data-attributes来完成整页刷新。当您在 中列出您的<option>标签时<select name="dept">，您可以为每个选项添加关于它属于哪个组织的额外信息。稍后我们可以利用这些信息来动态隐藏不需要的选项。

由于这种方法会影响 DOM，因此我真的建议您使用 jQuery 来完成它。我做了一个可以做到这一点的工作示例。

这是HTML-part，大部分是从您的 jsFiddle-example 复制的，但在每个部门选择中data-org添加了一个数据属性：<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 回答