How change the querystring for a submited form - asp.net-mvc-5

Question

I have a form with many dropdownlist and i want to exclude the none selected ones from appearing in the querystring when the form is submitted.
So can i use some module or filter to change this behavior.
Ex:
When i search for test the url will be
/someaction?q=test&select1=&select2=
The required url is :
/someaction?q=test
<form action="/search" action="Get">
<label>Search term <input name="q"></label>
<select id="select1" name="select1">
<option value="1">option 1</option>
</select>
<select id="select2" name="select2">
<option value="1">option 1</option>
</select>
<input type="submit">
</form>

Answer 1

Since you're using GET method for form action, you can handle submit event to prevent normal submit and strip out empty values using replace() function with regex, then use location.href to redirect into target URL:
$('form').submit(function (e) {
e.preventDefault();
var queryString = $(this).serialize().replace(/&?[\w\-\d_]+=&|&?[\w\-\d_]+=$/gi, "");
url = this.getAttribute('action') + (queryString.length > 0 ? "?" + queryString : "");
// returns URL /search?q=something when both select elements are empty
location.href = url;
});
Or disable the select elements without values on-the-fly using attr() or prop() to prevent them used in query string, using normal form submit event:
$('form').submit(function () {
$('select').each(function () {
if ($(this).val() == '') {
$(this).prop('disabled', 'disabled'); // or prop('disabled', true)
});
});