获取选择框选项的值而不使用 .change()

Get value of selectbox option without using .change()

本文关键字:change 选择 选项 获取      更新时间:2023-09-26

我有一个选择框,如下所示:

<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"的选择框)

我熟悉的唯一方法是在更改时获取选择框的值,但在这种情况下,受影响的元素直到更改发生后才会加载。

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

如果你使用的是JQuery,$(#select_search).val()应该可以做到这一点。

制作 $.live 的新方法

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