JQuery UI Selectmenu, относительно изменения выбранных элементов - PullRequest
Новая
       20

JQuery UI Selectmenu, относительно изменения выбранных элементов

1 голос
/ 30 января 2012

Я пытаюсь реализовать преобразователь тока, который мне удалось, но теперь я реализую кнопку, которая изменит выбранную опцию между двумя выбранными меню, что означает, что если в первом меню я выбрал 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».

Screen shot

jsfiddle.net пример

Ответы [ 3 ]

2 голосов
/ 30 января 2012

Оказывается, функция 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 голос
/ 30 января 2012

С 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;
    });
});
1 голос
/ 30 января 2012 
 $(function(){
    $('#switchButton').click(function(){
        var $sel1 = $('#fromCurrency');
        var $sel2 = $('#toCurrency');

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

    });
});

А вот и демка .

...