jQuery - 单击链接时更改下拉列表的值

jQuery - Change value of dropdown when link is clicked

本文关键字：下拉列表 单击 链接 jQuery      更新时间：2023-09-26

我正在尝试在单击链接时更改下拉列表的值。我已经做了尽职调查，并相信这可以通过"道具"来完成......但我不确定如何在我的特定示例中使用 prop。到目前为止，我使用的代码是...：

var $select = $('#finder-3--16');
$('a[href="#yearselect"]').click(function () {
    $select.val( $(this).data('select') );
});

单击链接时，它会设置值但不更改它（因此不会触发绑定到 onchange 的事件）。链接的示例如下所示...：

<a href="#yearselect" data-select="125921">2009</a>

我相信我必须以某种方式返回值然后使用它，但不确定该怎么做。任何帮助将不胜感激！

onchange函数可以在这里看到：

onChange: function(event)
{
    var select     = Event.element(event);
    var parentId   = select.value;
    var dropdownId = 0;
    /* should load next element's options only if current is not the last one */
    for (var i = 0; i < this.selects.length; i++){
        if (this.selects[i].id == select.id && i != this.selects.length-1){
            var selectToReload = this.selects[i + 1];
            if (selectToReload){
                dropdownId = selectToReload.id.substr(selectToReload.id.search('--') + 2);
            }
            break;
        }
    }
}

谢谢！

如果你问的是绑定到select变化的事件，试试

$select.val( $(this).data('select') ).change();

或.trigger('change')

它将触发更改事件，该事件将调用您的更改回调。

试试这个：

var $select = $('#finder-3--16');
$('a[href="#yearselect"]').click(function () {
    $select.val( $(this).attr('data-select') );
});

更新值后触发更改事件

var $select = $('#finder-3--16');
$('a[href="#yearselect"]').click(function () {
    $select.val( $(this).data('select') );
    $select.trigger('change');
});

听起来您没有在<option>标签上定义value属性。 这样做：

<select id="finder-3--16">
  <option value="125921">whatever label you want</option>
</select>

现在你现有的jQuery应该可以工作了。

看到这个小提琴：http://jsfiddle.net/X7SVe/

注意：这已更新为也触发更改事件。

我创建了一个小提琴来向您展示一个工作示例。

http://jsfiddle.net/Ru3Md/10/

简而言之，您需要的是：

$(function() {
$('a').on('click',function(event) {
    var txt =  $(this).text();
    $('#mySelect option')
.filter(function() { return $.trim( $(this).text() ) == txt; })
.attr('selected',true).change();
})

}）;

相关文章：