在不使用.change（）的情況下獲取selectbox選項的值

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加載的相應選擇框。 （例如，如果search_contact是選定的選項，則僅顯示id =“ search_contact”的選擇框）

我熟悉的唯一方法是在更改時獲取選擇框的值，但是在這種情況下，直到更改發生后，才會加載受影響的元素。

Answer 1

如果您使用的是JQuery，則$(#select_search).val()應該可以解決問題。

Answer 2

$ .live的新方法

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

Answer 3

您可以在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');
    });
});