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

Question

I have a form with a multi-level select list, the select list displays options based on what was previously selected (using jQuery). You can find the fiddle attached in my post or here . My form action is as follows:

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

The returned URL when the submit button is clicked is as follows:

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

However, I only want the last option selected in the multi-level select list to be passed in the URL. Eg: ../catalog.php?category=525i .

How can I do this?

Alternatively if I get the URL as it currently is to my catalog.php, how can I determine which the level values were passed based on the level of the select list in PHP itself?

 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> 

Answer 1

HTML form submission pack all the data in the form elements into string and send them to the destination. you can not change it. but you can use javascript to collect some certain data and send them to a url (via AJAX or simply by redirecting the browser with some data in it)

this is redirecting method:

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