我有一个带有多级选择列表的表单,选择列表显示基于先前选择的选项(使用jQuery)。你可以在我的帖子或这里找到小提琴。我的表单操作如下:
<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
。
我该怎么做?
或者,如果我获得当前catalog.php的URL,我如何根据php中选择列表的级别来确定传递了哪些级别值?
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();
}
});
});
<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>
HTML表单提交将表单元素中的所有数据打包成字符串并发送到目的地。你不能更改它。但你可以使用javascript收集一些特定的数据,并将它们发送到url(通过AJAX或简单地重定向浏览器中的一些数据)
这是重定向方法:
data = $("your element").serialize();
window.location.href = "your url/?"+data;