jQuery表单仅在提交时传递第一个选择框值

Question

我是这里的新人，这些年来已经访问了数次，以阅读每个人的想法。

我的问题是我有一个带有2个选择框的表单，第二个在第一个选择时填充了值。 第二个包含您提交时必须到达的url值。 使用onchange可以完美地使用此功能，但是仅在提交第二个选择列表网址中的第一个时起作用。 我可以交换它们，但只有第一个有效，所有其他仅传递主URL，后接一个交叉阴影线“＃”。

<script>
$(document).ready(function($){

$("#category").change(function() {
    $('select[name="product"]').removeAttr("name").hide();
    $("#" + $(this).val()).show().attr("name", "product");
});

/* ' This works on all
$(".product").change(function() {
    document.location = $(this).val();
});
*/

/* this only passes url on first product option list else passes opening url + #*/
$('#discover').submit(function() {    
        document.location = $(".product").val();
    return false;
});

});

</script>

<div id="discover-box">
<form id="discover" method="post">
<fieldset>
<p class="category">

<label class="title">Category:</label>
<select id="category" name="category">
        <option value="#" selected="selected">Choose category</option>
        <option value="accommodation">Accommodation</option>
        <option value="food">Food</option>
        <option value="explore">Explore</option>
</select>

<p><label>Sub-Category:</label>

<select id="accommodation" name="product" class="product">
<option value="#" selected="selected">Choose sub-category</option>
<option value="accommodation_category.asp?o=1&c=1">Motels</option>
<option value="accommodation_category.asp?o=2&c=2">Camping, Caravan & Holiday Parks</option>
<option value="accommodation_category.asp?o=3&c=3">B&B, Self-Contained Houses & Cottages</option>
<option value="accommodation_category.asp?o=4&c=4">Hotels</option>
<option value="accommodation_category.asp?o=5&c=5">Backpackers & Group Accommodation</option>
        <option value="accommodation_category.asp?o=6&c=6">National Parks</option>
</select>

<select id="food" style="display:none" name="product" class="product">
<option value="#" selected="selected">Choose sub-category</option>
<option value="food_wine_category.asp?o=1&t=1&c=1">Restaurants & Cafes</option>
<option value="food_wine_category.asp?o=2&t=1&c=2">Pubs</option>
<option value="food_wine_category.asp?o=3&t=1&c=3">Bakeries & Takeaway</option>
<option value="food_wine_category.asp?o=4&t=1&c=4">Local Produce</option>
<option value="food_wine_category.asp?o=5&t=2&c=1">Mount Gambier Wine Region</option>
<option value="food_wine_category.asp?o=5&t=2&c=2">Other Limestone Coast Wine Regions</option>
</select>

<select id="explore" style="display:none" name="product" class="product">
<option value="#" selected="selected">Choose sub-category</option>
<option value="explore_category.asp?o=1">Top 10</option>
<option value="explore_category.asp?o=2">Arts, Crafts, Galleries & Museums</option>
<option value="explore_category.asp?o=3">Heritage, Antiques & Collectables</option>
<option value="explore_category.asp?o=4">Family Fun</option>
<option value="explore_category.asp?o=5">Caves & Sinkholes</option>
<option value="explore_category.asp?o=6">Parks & Gardens</option>
<option value="explore_category.asp?o=7">Walks & Drives</option>
<option value="explore_category.asp?o=8">Kanawinka Geotrail</option>
<option value="explore_category.asp?o=9">Retail</option>
<option value="explore_category.asp?o=10">Recreation, Leisure & Adventure</option>  
</select>

</p>
<p class="buttons">
        <input type="image" src="images/submit-red.png" Value="submit">
</p>

</fieldset>
</form>
</div>

Answer 1

打开Fiddler（fiddler2.com），然后看帖子过去。 我发现，通常，当页面上的多个控件使用相同的名称时，浏览器实际上会传递所有这些控件，但是服务器端框架期望每个post参数都是唯一的，但会忽略除最后一个参数之外的所有参数。

Answer 2

因为$（“。product”）。val（）; 会发现具有类产品的DOM的首次出现，因此无论如何它将获取第一个...您可以使用

$('#discover').submit(function() {    
       document.location = $('select[name="product"]').val();
   return false;
});

Answer 3

提交时，只有一个带有属性名称的选择框，因此您可以通过该属性选择所选值

$('#discover').submit(function() {    
        document.location = $('select[name="product"]').val();
    return false;
});