如何修剪多级选择列表的“提交”值?

时间:2015-03-30 18:36:37

标签: javascript php jquery html forms

我有一个带有多级选择列表的表单,选择列表根据之前选择的内容显示选项(使用jQuery)。您可以在我的帖子或here中找到附带的小提琴。我的表格行动如下:

<form action="catalog.php?category=submit" method="GET" id="selectorForm">

单击提交按钮时返回的URL如下:

.../catalog.php?series=5series&3generation=&5generation=e39&e46model=&e39model=525i&e60model=

但是,我只希望在多级选择列表中选择的最后一个选项在URL中传递。例如:../catalog.php?category=525i

我该怎么做?

或者,如果我获取目前的URL到我的catalog.php,如何根据PHP本身的选择列表级别确定传递的级别值?

&#13;
&#13;
jQuery(function($) {

  $("#series").change(function() {
    var targetID = $(this).val();
    $("div.generation").hide();
    $('#' + targetID).show();
  });

  $("#3generation").change(function() {
    var targetID = $(this).val();
    $("div.model").hide();
    $('#' + targetID).show();
  });

  $("#5generation").change(function() {
    var targetID = $(this).val();
    $("div.model").hide();
    $('#' + targetID).show();
  });

  $('.selectModel').change(function() {
    if ($(this).val() != "") {
      $('#submit').show();
    } else {
      $('#submit').hide();
    }
  });

});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3 align="center">Choose your BMW<br /><br /></h3>

<div id="selectorFormContainer" width="100%" align="center">

  <form action="catalog.php?category=submit" method="GET" id="selectorForm">

    <div id="SeriesContainer" class="selector">
      <select id="series" class=" validate['required']" name="series" size="1">
        <option value="">Choose your BMW's series</option>
        <option value="3series">3 series</option>
        <option value="5series">5 series</option>
      </select>
    </div>
    <br />
    <div id="3series" class="generation" style="display: none;" onchange="ChangeDropdowns(this.value)">
      <select id="3generation" class="selectGen" name="3generation" size="1">
        <option value="">Choose your BMW's generation</option>
        <option value="e46">E46 (1998 - 2006)</option>
      </select>
    </div>
    <div id="5series" class="generation" style="display: none;" onchange="ChangeDropdowns(this.value)">
      <select id="5generation" class="selectGen" name="5generation" size="1">
        <option value="">Choose your BMW's generation</option>
        <option value="e39">E39 (1995 - 2003)</option>
        <option value="e60">E60 (2003 - 2010)</option>
      </select>
    </div>
    <br />
    <div id="e46" class="model" style="display: none;" onchange="ChangeDropdowns(this.value)">
      <select id="e46model" class="selectModel" name="e46model">
        <option value="">Choose your BMW's model</option>
        <option value="320i">320i</option>
      </select>
    </div>
    <div id="e39" class="model" style="display: none;" onchange="ChangeDropdowns(this.value)">
      <select id="e39model" class="selectModel" name="e39model">
        <option value="">Choose your BMW's model</option>
        <option value="525i">525i</option>
        <option value="540i">540i</option>
      </select>
    </div>
    <div id="e60" class="model" style="display: none;" onchange="ChangeDropdowns(this.value)">
      <select id="e60model" class="selectModel" name="e60model">
        <option value="">Choose your BMW's model</option>
        <option value="M5">M5</option>
      </select>
    </div>
    <br />
    <div id="submit" style="display: none;">
      <input value="submit" style="border: none; border-radius: 5px; height: 2em; width: 10em; background-color: #22b8f0; color: #ffffff;" type="submit" />
    </div>
  </form>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

HTML表单提交将表单元素中的所有数据打包成字符串并将它们发送到目标。你无法改变它。但是您可以使用javascript收集某些特定数据并将其发送到网址(通过AJAX或仅通过重定向浏览器中的一些数据)

这是重定向方法:

data = $("your element").serialize();
window.location.href = "your url/?"+data;