使用链接和asmselect选择选择表单选项

我已经集成了jquery-asmselect，并且希望能够使用页面上的其他链接选择选项。为了形象我想要做的，你可以查看页面here 使用链接和asmselect选择选择表单选项

这里是jQuery代码我使用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; 
    })); 
});

来源

2011-12-11 heath1224

对不起，我不理解。你能否澄清你的意思：“我希望能够使用页面上的其他链接选择选项。” ？ –

嘿@AllenZ。，在我的页面http://dev.mybrunchi.com上，我想使用左侧的地图链接来定位邻居选择选项。我试过一些其他的JavaScript代码，但它打破了asmselect代码。我正在寻找一种能够保持asmselect功能的解决方案。 – heath1224

谢谢。我明天去看看。 –

首先，你需要确定点击你最近的邻居。将rel（如在选项）可能的工作：

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

然后，添加这个脚本：

基于 this asmselect例如

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

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

。您只需根据点击的链接获取对应的选项，然后调用change();触发器即可。

编辑：

上面的代码失败大时间：P这里的新版本（采用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; 
});

我必须做一些事情，我真的不喜欢，但我无法找到任何其他方式来做到这一点，而不会与插件冲突。无论如何，这并不坏。基本上我得到邻居的名字，rel来标识选项，生成一个新的<option>,change();它，并删除旧的选项标签。该插件不喜欢试图改变标签本身，而不创建一个新的标签......我不得不添加if (...)的东西，因为当添加一个邻域（在选择上禁用它），并再次点击同一邻域时，它启用它在选择（我们不希望这样，因为它已经被选中）。在这种情况下，如果我们点击一个禁用邻居的链接，我们什么也不做，选项将保持不变。

对不起，如果我的解释很糟糕，我花了一段时间才得到这个问题，我不得不再次建立一切，我觉得缺乏英语xD希望它的作品！

来源

2011-12-11 22:49:09 scumah

我试过了，但无法启动它。我可能没有指定rel的正确值？ – heath1224

这不是你的错，它与插件冲突:(这是苛刻的，但我想我终于明白了：P请参阅我的问题编辑！ – scumah

完美！谢谢@scumah！看到它在这里行动：http： //dev.mybrunchi.com – heath1224

使用链接和asmselect选择选择表单选项

回答

相关问题