JQM Получить значение из опции формы

Question

У меня есть некоторые базовые HTML, т.е.

    <select id="list1">
        <option value="1">Item1</option>
        <option value="2" selected="selected" >Item2</option>
    </select>
    <select id="list2">
        <option value="3">Item3</option>
        <option value="4">Item4</option>
    </select>

По умолчанию у меня #list2 скрыт и показан при изменении #List1 на значение опции 2 как таковое...

    $('#list2').hide();

    $('#list1').on('change', function () {
     if ($(this).val() == '2') {
      $('#list2').parent('div').hide();
     } else {
       $('#list2').parent('div').show();
    }
    });

Что меня интересует, так это как ПОКАЗАТЬ список 2, если динамически ВЫБРАННОЕ значение равно "2" при загрузке страницы. то есть не после события, но до одного.

Заранее спасибо за любую помощь / совет. Что мне интересно, так это как я могу

Answer 1

Рабочий пример: http://jsfiddle.net/Gajotres/uX3NL/

Мало что следует заметить, data-role="none" добавлено ко второму выбору. Это предотвратит показ jQuery mobile, даже если для дисплея установлено значение none. Вот почему я удаляю этот атрибут, затем показываю select и повторно создаю его с помощью функции selectmenu.

Javascript:

$(document).on('pagebeforeshow', '#index', function(){       
    if($('#list1').find(":selected").val() == 2) {
        $('#list2').removeAttr('data-role').show().selectmenu();
    }
});

CSS:

#list2 {
    display: none;
}

HTML:

    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">
            <select id="list1">
                <option value="1">Item1</option>
                <option value="2" selected="selected">Item2</option>
            </select>
            <select id="list2" data-role="none">
                <option value="3">Item3</option>
                <option value="4">Item4</option>
            </select>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>  

Answer 2

Вы можете вызвать событие изменения при загрузке страницы

$("#list1").trigger("change");

Answer 3

Я использовал следующее, чтобы заставить его работать. $('# Песни2') скрыть ().

    var selVal = $("#vlist1 :selected").val() ;

     if (selVal == 2) {

     $('#list2').show();