獲取選擇框選項的值，而無需使用.change（）

Question

我有一個選擇框，如下所示：

<select id="select_search"> 
    <option value="search_contact">Contact</option> 
    <option value="search_customer">Customer</option> 
    <option value="search_employee">Employee</option> 
    <option value="search_servEmp">Service Employee</option> 
    <option value="search_servOrg">Service Org</option> 
</select> 

上述選擇框是一個搜索表單的一部分。當您提交表單時，使用ajax請求將結果異步返回到同一頁面。

在我的結果頁面（異步加載的頁面）上，我有一組其他的選擇框作爲結果的篩選器。

<select id="select_customer"> 
    <option value="">something</option> 
</select> 
<select id="select_contact"> 
    <option value="">something else</option> 
</select> 
etc.... 

我怎樣才能得到原來的選擇框（#select_search）的值可以顯示/隱藏通過AJAX加載，適當selectboxes。 （例如，如果search_contact是選定的選項，僅顯示ID =「search_contact」的選擇框）

我熟悉的唯一方法是獲取選擇框的值，但在這種情況下受影響的元素將在更改發生之後纔會被加載。

Answer 1

可以在jsFiddle試試這個。

$(function() { 
    $(document).on('change', '#select_search', function() { 
     $('select:not(#select_search)').addClass('invisble'); 
     var selectSearchVal = $(this).find('option:selected').val(); 
     $('#select_' + selectSearchVal.replace('search_', '')).removeClass('invisble'); 
    }); 
}); 

Answer 2

如果您使用JQuery $(#select_search).val()應該做的伎倆。

Answer 3

的新方法，使$ .live

$(document).on('change', '#select_search', function() { 
// change 
});