Question

I have integrated jquery-asmselect and would like to be able to also select the options using other links on the page. To visualize what I’m trying to do, you can view the page here

Here is the jquery code I’m using for asmselect:

$(document).ready(function() {
    $("#CategoryID").asmSelect({
        addItemTarget: 'bottom',
        animate: true,
        highlight: false,
        sortable: false
    }).after($("<a href='#' class='select-all'>select all neighborhoods</a>").click(function() {
        $("#CategoryID").children().attr("selected", "selected").end().change();
        return false;
    })); 
    $("#search_SubCategoryID").asmSelect({
        addItemTarget: 'bottom',
        animate: true,
        highlight: false,
        sortable: false
    }).after($("<a href='#' class='select-all'>select all cuisines</a>").click(function() {
        $("#search_SubCategoryID").children().attr("selected", "selected").end().change();
        return false;
    })); 
}); 

Answer 1

First of all, you’ll need to identify in wich neighborhood you are clicking. Adding a rel (like in the options) might work:

...
<li class="evillage">
    <a href="#" rel="asm0option0">East Village/LES</a>
</li>
...

Then, add this script:

$(".search-map a").click(function(event) {
    event.preventDefault();
    var hood = $(this).attr('rel');
    var $option = $('option[rel=' + hood + ']');

    $option.change();
    return false; 
});

Based on this asmselect example. You just need to get the correspondig option depending on the clicked link, and then call the change(); trigger on it.

EDITED:

The above code failed big time 😛 Here’s the new version (With a working fiddle):

$(".search-map a").click(function() {

    var $city = $(this).html();
    var $rel = $(this).attr('rel');
    var disabled = $('#asmSelect0 option[rel=' + $rel + ']:first').attr('disabled');

    if (typeof disabled !== 'undefined' && disabled !== false) {
        return false;
    }

    var $option = $('<option></option>').text($city).attr({'selected': true, 'rel': $rel});

    $('#asmSelect0').append($option).change();
    $('#asmSelect0 option[rel=' + $rel + ']:first').remove();

    return false; 
}); 

I had to do something I don’t really like, but I couldn’t find any other way of doing this without conflicting with the plugin. Anyway, it’s not that bad. Basically I get the name of the neighborhood, the rel to identify the option, generate a new <option>, change(); it, and delete the old option tag. The plugin didn’t like trying to change the tag itself without creating a new one… I had to add the if (...) thing because when adding a neighborhood (disabling it on the select), and clicking again on the same neighborhood, it enabled it on the select (And we don’t want that, since it’s already selected). With that condition, if we click on a link whose neighborhood is disabled, we’ll do nothing and the option will remain the same.

Sorry if my explanation sucks, It took me a while to get the problem, I had to build everything up again, and I felt like having a lack of english xD Hope it works!