1

我正在尝试实现一个成功的货币转换器，但现在我正在实现一个按钮，它将更改两个选定菜单之间的选定选项，这意味着如果在第一个菜单中我选择了 usd，而在第二个菜单中我有 gbp选择然后当按下按钮时，我希望在第一个菜单中选择 gbp，在第二个菜单中选择 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);
    });
});

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

截屏

jsfiddle.net 示例

4

3 回答 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>标记中表示选择列表，这就是为什么您实际上无法更改原始选择列表的原因。

于 2012-01-30T12:34:16.390 回答
1 
 $(function(){
    $('#switchButton').click(function(){
        var $sel1 = $('#fromCurrency');
        var $sel2 = $('#toCurrency');

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

    });
});

这是演示。

于 2012-01-30T09:46:21.403 回答
1

从http://wiki.jqueryui.com/w/page/12138056/Selectmenu：

Methods:
   refresh
       parses the original element again, updates the value option and
       rerenders the menu triggers events if value changed

因此，只需在对基础选择进行更改后添加：

$(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;
    });
});
于 2012-01-30T10:12:03.360 回答