Question

I’m trying to check whether $(‘select option:selected’).val(); contains certain words and if so, redirect to a certain page.

Here’s my HTML:

<select name="people_view" id="people_view">
    <optgroup label="People Categories">
        <option value="category_1">Members</option>
        <option value="category_2">Connections</option>     
    </optgroup>
    <optgroup label="Groups">
        <option value="group_1">Group 1</option>
        <option value="group_2">Group 2</option>
        <option value="group_3">Group 3</option>
    </optgroup>
    <optgroup label="Custom Views">
        <option value="view_1">Test People View</option>
    </optgroup>
</select>

Here’s my JS:

    if ($('#people_view option:selected:contains("category_")')) {

        categoy_id = $(this).val().replace('category_', '');
        window.location.href = admin_url + 'people/?category=' + categoy_id;

    } else if ($('#people_view option:selected:contains("group_")')) {

        group_id = $(this).val().replace('group_', '');
        window.location.href = admin_url + 'people/?group=' + group_id;

    } else if ($('#people_view option:selected:contains("view_")')) {

        view_id = $(this).val().replace('view_', '');
        window.location.href = admin_url + 'people/?view=' + view_id;

    }

Is it not possible to use two selectors at once (e.g: :selected:contains()). Or am I just doing something wrong?

Thanks for your help!

Answer 1

$('#people_view').change(function() {
    var val = $(':selected', this).val();
    var arr = val.split('_');
    console.log(admin_url + 'people/?' + arr[0] + '=' + arr[1]); // this for your visual of the url. delete this line
    //window.location.href = admin_url + 'people/?'+ arr[0] +'=' + arr[1]; // uncomment this line
});