2013-05-01 61 views
2

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

这里是我的代码的一部分,它仍然是未完成的,你可以选择只有前几个品牌和型号,但它应该告诉你什么即时通讯试图实现...即时通讯也计划包括可选的年份变化和修剪版。

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

所以,主要的问题是,如何显示结果或特定网页,之后用户选择,型号(...一年,修剪,等等),从列表中。

+0

“..如何显示结果...”。期望的结果是什么? – Sharun 2013-05-01 10:59:53

+0

我想要选择列表值作为我的内容的过滤器,它将以分类添加的形式进行工作...因此,用户将选择选择列表中的所有参数,并在提交内容时以适当的方式过滤。 – 2013-05-01 11:47:09

+0

我还没有得到你的问题。这些列表的形式是,那么你为什么不提交表单并在服务器中访问这些值? – Sharun 2013-05-02 03:25:46

回答

1

你真的想用JavaScript解析数据而不使用任何服务器端语言(PHP,ASP等)吗?

如果你再对这个简单的例子看看:

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

您可以通过该值作为行动的一部分字符串,因此它成为位置字符串的一部分,您可以在被叫页面中查看。

如果您想传递多个值,请将位置前端翻到'?'然后通过'='拆分()余数以获得传递的名称/值对的数组。

希望这有助于