jquery ui selectmenu,关于更改所选项目

问题描述 投票:0回答:3

我正在尝试实现一个货币转换器,我成功了,但现在我正在实现一个按钮,该按钮将更改两个选定菜单之间的选定选项,这意味着如果在第一个菜单中我选择了 usd,在第二个菜单中我选择了 usd选择英镑,然后按下按钮时,我希望在第一个菜单中选择英镑,在第二个菜单中选择美元。 我已设法更改两个菜单上的选定选项,但它不会在菜单本身中显示它。 我忘记了什么?

 $(function(){
    $('a#switchButton').click(function(){
        var $sel1 = $('#fromCurrency');
        var val1 = $sel1.val();
        var $sel2 = $('#toCurrency');
        var val2 = $sel2.val();
        $sel1.find("option[value='"+val1+"']").attr("selected",false);
        $sel1.find("option[value='"+val2+"']").attr("selected",true);
        $sel2.find("option[value='"+val2+"']").attr("selected",false);
        $sel2.find("option[value='"+val1+"']").attr("selected",true);
    });
});

这是一个屏幕截图,当按下中间的图标时,这里没有任何变化,但只有代码本身。如果我按下图标,我希望美元出现在“from”中,inr出现在“to”中。

Screen shot

jsfiddle.net 示例

jquery jquery-ui select-menu
3个回答
2
投票

事实证明 selectmenu() 函数有它自己的更改值的方法。
在此处查看工作版本:http://jsfiddle.net/atR6D/55/

$('#switchButton').click(function(){
    var sel1 = $('#fromCurrency').selectmenu("value");
    var sel2 = $('#toCurrency').selectmenu("value");
    $('#fromCurrency').selectmenu("value", sel2);
    $('#toCurrency').selectmenu("value", sel1);
});  

它看起来像是在

<span>
标签中表示选择列表,这就是为什么您实际上无法更改原始选择列表。


1
投票
 $(function(){
    $('#switchButton').click(function(){
        var $sel1 = $('#fromCurrency');
        var $sel2 = $('#toCurrency');

        var tmp = $sel2.val();
        $sel2.val($sel1.val());
        $sel1.val(tmp);

    });
});

这是演示


1
投票

来自 http://wiki.jqueryui.com/w/page/12138056/Selectmenu

方法:

refresh

再次解析原始元素,更新值选项并重新渲染菜单,如果值更改则触发事件

因此,只需在对底层选择进行更改后添加即可:

$(function(){
    $('a#switchButton').click(function(){
        var $sel1 = $('#fromCurrency');
        var val1 = $sel1.val();
        var $sel2 = $('#toCurrency');
        var val2 = $sel2.val();
        $sel1.find("option[value='"+val1+"']").attr("selected",false);
        $sel1.find("option[value='"+val2+"']").attr("selected",true);
        $sel2.find("option[value='"+val2+"']").attr("selected",false);
        $sel2.find("option[value='"+val1+"']").attr("selected",true);

        $sel1.selectmenu('refresh');
        $sel2.selectmenu('refresh');

        return false;
    });
});
© www.soinside.com 2019 - 2024. All rights reserved.