JQuery Droplist Обновить - PullRequest
       4

JQuery Droplist Обновить

2 голосов
/ 22 июля 2011

У меня проблема с выпадающим списком ... У меня есть выпадающий список на странице и кнопка "Сохранить". Когда вы выбираете нужный вариант выпадающего списка ... и нажимаете "Сохранить", значение отправляется в БД и сохраняетсятам ... когда вы заходите на эту страницу снова ... в раскрывающемся списке должно отображаться значение, которое вы сохранили в прошлый раз ... но у меня возникла проблема ... когда я захожу на эту страницу ... в раскрывающемся списке не отображается правильное значениезначение .. оно показывает мне первое значение .. но когда я нажимаю на него, вариант, выбранный в этом меню, является правильным ..

Я думаю, может быть, мне нужно обновить его или что-то?

вот js ->

    <script>
    $(document).ready(function() {
        var defaultValue = Settings.getDefaultTimespan();


        if (defaultValue == $('#opt' + defaultValue).val()) {

            $('#opt' + defaultValue).attr('selected','selected');  
        }

        $('#saveBtn').click(function() {

            Settings.setDefaultTimespan(parseInt($('#timeSettingsDropList').val()));

        });
    });
    </script>

вот HTML - >>

            <div id="timespanSettings">
                <table>
                    <tr>
                        <td style="width: 15%"><p>Default timespan:</p></td>
                        <td style="width: 85%"><select name="timeDropList" id="timeSettingsDropList">
                                <option id="opt0" value="0">6 Minutes</option>
                                <option id="opt1" value="1">10 Minutes</option>
                                <option id="opt2" value="2">15 Minutes</option>
                                <option id="opt3" value="3">30 Minutes</option>
                                <option id="opt4" value="4">1 Hour</option>
                        </select></td>
                    </tr>
                </table>

            </div>

Как вы можете видеть .. выпадающий список показывает "6 минут", но выбран "1 час"

enter image description here

Ответы [ 2 ]

1 голос
/ 22 июля 2011

Не уверен, что это будет работать, но как насчет использования localStorage? Пример:

JS:

var ts = localStorage.getItem('timeSelected');

var tsList = $('#timeSettingsDropList');
tsList[0].selectedIndex = ts;
tsList.selectmenu("refresh");

$('#timeSettingsDropList').change(function() {
    localStorage.setItem('timeSelected', $(this).val());
    ts = localStorage.getItem('timeSelected');
});

HTML:

<div data-role="page" id="home"> 
    <div data-role="content">
        <div id="timespanSettings">
            <table>
                <tr>
                    <td style="width: 15%"><p>Default timespan:</p></td>
                    <td style="width: 85%"><select name="timeDropList" id="timeSettingsDropList">
                            <option id="opt0" value="0">6 Minutes</option>
                            <option id="opt1" value="1">10 Minutes</option>
                            <option id="opt2" value="2">15 Minutes</option>
                            <option id="opt3" value="3">30 Minutes</option>
                            <option id="opt4" value="4">1 Hour</option>
                    </select></td>
                </tr>
            </table>
        </div>
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
            <li data-role="list-divider">Navigation</li> 
            <li><a href="#page2">View Page 2</a></li> 
        </ul> 
    </div>
</div>
<!-- Page 2 -->
<div data-role="page" id="page2"> 
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
            <li data-role="list-divider">Navigation</li> 
            <li><a href="#home">View Home Page</a></li> 
        </ul>
    </div>
</div>
0 голосов
/ 22 июля 2011

Чтобы выбрать опцию в раскрывающемся списке, вам просто нужно передать значение в методе val, как показано ниже.

$(document).ready(function() {
        var defaultValue = Settings.getDefaultTimespan();

        $("#timeSettingsDropList").val(defaultValue);

        $('#saveBtn').click(function() {

            Settings.setDefaultTimespan(parseInt($('#timeSettingsDropList').val()));

        });
    });
...