2

我想要实现的目标是让一些选择列表相互连接，并且在用户从选择列表中选择所有适合他或她的参数后，我希望脚本显示所选参数的结果。现在我知道如何创建选择列表，但我不知道如何显示结果。

这是我的代码的一部分，它仍未完成，您只能选择前几个品牌和型号，但它应该向您展示我试图实现的目标......我还计划包括可选择的年份变化和修剪版本。

http://jsfiddle.net/Xh5uC/1/

<div class="articles">
<form method="GET" action=_output.html>
    <table align="center">
        <tr>
            <th>
                <label for="id_znamka_vozila">Znamka vozila:</label>
            </th>
            <td>
                <select name="znamka_vozila" id="id_znamka_vozila">
                    <option value="">Izberite</option>
                    <option value="1">Alfa Romeo</option>
                    <option value="2">Aston Martin</option>
                    <option value="3">Audi</option>
                    <option value="4">Austin</option>
                    <option value="5">Autobianchi</option>
                    <option value="6">Bentley</option>
                    <option value="7">BMW</option>
                    <option value="8">Bugatti</option>
                    <option value="9">Buick</option>
                    <option value="10">Cadillac</option>
                </select>
            </td>
        </tr>
        <tr>
            <th>
                <label for="id_alfaromeo">Model vozila:</label>
            </th>
            <td>
                <select name="alfaromeo" id="id_alfaromeo">
                    <option value="" selected="selected">Izberite</option>
                    <option value="33">33</option>
                    <option value="75">75</option>
                    <option value="90">90</option>
                    <option value="145">145</option>
                    <option value="146">146</option>
                    <option value="147">147</option>
                    <option value="155">155</option>
                    <option value="156">156</option>
                    <option value="159">159</option>
                    <option value="164">164</option>
                    <option value="166">166</option>
                    <option value="4C">4C</option>
                    <option value="8C">8C</option>
                    <option value="alfasud">Alfasud</option>
                    <option value="alfetta">Alfetta</option>
                    <option value="brera">Brera</option>
                    <option value="crosswagon">Crosswagon</option>
                    <option value="giulia">Giulia</option>
                    <option value="giulietta">Giulietta</option>
                    <option value="GT">GT</option>
                    <option value="GTV">GTV</option>
                    <option value="mito">Mito</option>
                    <option value="rzsz">RZ/SZ</option>
                    <option value="spider">Spider</option>(
                    <option value="sprint">Sprint</option>
                </select>
            </td>
        </tr>



$(document).ready(function () {
var $alfaromeoTr = $('#id_alfaromeo').closest('tr').hide();
var $astonmartinTr = $('#id_astonmartin').closest('tr').hide();
var $audiTr = $('#id_audi').closest('tr').hide();
var $bentleyTr = $('#id_bentley').closest('tr').hide();

$('#id_znamka_vozila').change(function () {
    var selectedValue = $(this).val();

    if (selectedValue === '1') {
        $astonmartinTr.hide();
        $alfaromeoTr.show();
        $bentleyTr.hide();
        $audiTr.hide();

    } else if (selectedValue === '2') {
        $astonmartinTr.show();
        $alfaromeoTr.hide();
        $audiTr.hide();
        $bentleyTr.hide();

    } else if (selectedValue === '3') {
        $audiTr.show();
        $astonmartinTr.hide();
        $alfaromeoTr.hide();
        $bentleyTr.hide();

    } else if (selectedValue === '6') {
        $bentleyTr.show();
        $audiTr.hide();
        $astonmartinTr.hide();
        $alfaromeoTr.hide();



    } else {
        $astonmartinTr.hide();
        $alfaromeoTr.hide();
        $audiTr.hide();
        $bentleyTr.hide();
    }
}

所以主要问题是，在用户从列表中选择品牌、型号（...年份、修剪等）后，如何显示结果或特定页面。

4

1 回答 1

1

您真的想在不使用任何服务器端语言（PHP、ASP 等）的情况下使用 JavaScript 解析值吗？

如果你这样做了，那么看看这个简单的例子：

第1页.htm

<HTML>
<HEAD>
<TITLE></TITLE>
<META NAME="GENERATOR" Content="Microsoft Visual Studio">
<META HTTP-EQUIV="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function passValue(val)
{
    if(!val)
    {return false;}

    document.forms[0].action = "Page2.htm?value=" + val;
    return true;
}
</script>
</HEAD>
<BODY>

<form onsubmit="passValue(this.first_name.value)" method="post">
<input type="text" name="first_name" size="30">
<input type="submit" value="click me!">
</form>

</BODY>
</HTML>

Page2.htm

<HEAD>
<TITLE></TITLE>
<META NAME="GENERATOR" Content="Microsoft Visual Studio">
<META HTTP-EQUIV="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
window.onload = function()
{
    var val = window.location.toString().substr(window.location.toString().indexOf('=') + 1);
    document.body.appendChild(document.createTextNode("The value was: " + val));
}
</script>

</HEAD>
<BODY>
</BODY>
</HTML>

您可以将值作为操作字符串的一部分传递，因此它成为位置字符串的一部分，您可以在调用的页面中检查它。

如果您希望传递多个值，请将位置前端撕成“？” 然后通过'=' split() 余数以获取传递的名称/值对的数组。

希望这可以帮助

于 2013-05-02T06:39:43.487 回答