Question

我是这里的新帖子，多年来曾多次访问过阅读每一个想法。

我的问题是我有一个带有2个选择框的表单，第二个表格填充了第一个选择的值。第二个包含您提交时需要的网址值。此函数使用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;
});

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

3 个答案: