jquery 폼이 첫 번째 선택 상자 값을 전달할 때

Question

나는 여기에 새로운 글을 올렸으며, 여러 해후에 걸쳐 모든 것들을 읽었습니다.

제 문제는 두 개의 선택 상자가있는 양식입니다. 두 번째 선택 상자는 첫 번째 선택시 값으로 채워집니다. 두 번째는 제출할 URL 값을 보유하고 있습니다. 이 기능은 onchange를 사용하여 완벽하게 작동하지만 두 번째 선택 목록 URL 중 첫 번째 항목 만 제출하면 작동합니다. 나는 그 (것)들을 교환 할 수 있는다 그러나 첫번째 일만, 다른 사람은 십자가 '#'에 선행 된 1 차적인 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

$ (". product"). val(); 당신이 제출할 때 DOM 가진 클래스 제품의 첫 번째 항목을 찾을 수있는 경우에, 그래서 먼저 하나를 가져옵니다 ... u는 그래서, 당신은 속성 이름 하나만 선택 상자를 가지고

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

Answer 2

오픈 피들러 (fiddler2.com)를 열고 포스트가 지나가는 것을 지켜보십시오. 페이지의 두 개 이상의 컨트롤이 동일한 이름을 사용하면 일반적으로 브라우저가 실제로 모든 것을 전달하지만 각 게시 매개 변수가 고유해야한다는 서버 측 프레임 워크는 마지막 매개 변수를 제외한 모든 매개 변수를 무시합니다.

Answer 3

사용하여이 작업을 수행 할 수 있습니다 해당 속성으로 선택한 값을 선택할 수 있습니다.

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