Question

当用户选择他们的＆＃34;讲师＆＃34;时，我试图显示联系表格。从下拉。下拉数据是从数据库中获取的并且显示正常，我只是无法将联系表单提供给＆＃34;隐藏＆＃34;在页面加载和＆＃34;显示＆＃34;当一位讲师被选中时。任何帮助都会很棒。

HTML

<!-- Page: Contact -->
<div id="contact"
    data-theme="b"
    data-role="page"
    data-title="View Source: Contact">
    <div data-role="header"
        data-theme="a"
        data-position="fixed"
        data-id="vs_header">
        <h1>Contact</h1>
        <a href="#home"
            data-icon="home"
            data-iconpos="notext"
            >Home</a>
        <a href="#log-out"
            data-icon="gear"
            data-iconpos="notext"
            data-rel="dialog"
            >log-out</a>
    </div><!-- header -->

    `<div id="messagePage">
                <div data-role="content">   
            <div data-title="Send Message">

        <!-- open content styling -->
        <div class="ui-corner-all custom-corners">
            <!-- begin message section -->
            <div class="ui-bar ui-bar-a">
                <h3>Send Message</h3>
            </div><!-- close message section -->
            <!-- open lecturer filter  -->
            <div class="ui-body ui-body-b">
                <label for="select-choice-1" class="select">Select a lecturer</label>
                    <select name="select-choice-1" id="select-choice-3" autofocus>
                    </select>
            </div><!-- close lecturer filter-->
            <!-- add spacing for legibility, to be hidden later -->


    </div><!-- close content -->
            </div>
            </div>
    </div>

            <!-- begin message content-->
            <div class="ui-body ui-body-b" id="messageContent">
                <form id="messageForm" onchange="this.form.submit()">
                    <!-- message area -->
                    <label for="textarea">Type your message:</label>
                    <textarea cols="40" rows="8" name="textarea" id="textarea">
                    </textarea>
                    <!-- full name -->
                    <label for="basic">Enter your full name:</label>
                    <input type="text" name="name" id="basic" placeholder="e.g. Cookie Monster" required><input>
                    <!-- response date -->
                    <label for="date">Request response by:</label>
                    <input type="date" name="newinput" required><input>
                    <!-- submit button -->
                    <input type="submit" value="Submit">
                </form>
            </div><!-- close message content-->
        </div><!-- close content styling -->

` jQuery的

{
    $.getJSON("http://localhost:80/php/json-data-lecturers.php", function(data) {
        $.each(data.lecturers, function(index, lecturer) {
            $("#select-choice-3").append("<option id='" + lecturer.firstName + "' value='" + lecturer.firstName + "'>" + lecturer.firstName + " " + lecturer.lastName+ "</option>");        
        });
    });
};

//populate student page upon page creation
$(document).on("pagecreate","#messagePage",function(event){
    populateTeacherNames();
    //hide message content
    $("#messageContent").hide();
    $("div.spacefiller").show();
});

//display message content once user selects lecturer from dropdown menu
$("select").change(function(){
    $("div.spacefiller").hide();
    $("#messageContent").show(1000);
});

Answer 1

我已经注释了您的javascript代码，并在选择更改时向display: none添加了#messageContent，我将.show()添加到#messageContent以使其可见。

＆＃13;

    //    $.getJSON("http://localhost:80/php/json-data-lecturers.php", function (data) {
    //        $.each(data.lecturers, function (index, lecturer) {
    //            $("#select-choice-3").append("<option id='" + lecturer.firstName + "' value='" + lecturer.firstName + "'>" + lecturer.firstName + " " + lecturer.lastName + "</option>");
    //        });
    //    });
    //
    //    //populate student page upon page creation
    //    $(document).on("pagecreate", "#messagePage", function (event) {
    //        populateTeacherNames();
    //        //hide message content
    //        $("#messageContent").hide();
    //        $("div.spacefiller").show();
    //    });
    //
    //    //display message content once user selects lecturer from dropdown menu
    //    $("select").change(function () {
    //        $("div.spacefiller").hide();
    //        $("#messageContent").show(1000);
    //    });
    $('#select-choice-3').on('change', function () {
        if ($(this).val() != 0) {
            if ($('#messageContent').is(':hidden')) {
                $('#messageContent').show();
            }
        } else {
            $('#messageContent').hide();
        }
    });

＆＃13;

#messageContent {
            display: none;
        }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Page: Contact -->
<div id="contact"
     data-theme="b"
     data-role="page"
     data-title="View Source: Contact">
    <div data-role="header"
         data-theme="a"
         data-position="fixed"
         data-id="vs_header">
        <h1>Contact</h1>
        <a href="#home"
           data-icon="home"
           data-iconpos="notext"
        >Home</a>
        <a href="#log-out"
           data-icon="gear"
           data-iconpos="notext"
           data-rel="dialog"
        >log-out</a>
    </div><!-- header -->

    `
    <div id="messagePage">
        <div data-role="content">
            <div data-title="Send Message">

                <!-- open content styling -->
                <div class="ui-corner-all custom-corners">
                    <!-- begin message section -->
                    <div class="ui-bar ui-bar-a">
                        <h3>Send Message</h3>
                    </div><!-- close message section -->
                    <!-- open lecturer filter  -->
                    <div class="ui-body ui-body-b">
                        <label for="select-choice-3" class="select">Select a lecturer</label>
                        <select name="select-choice-1" id="select-choice-3" autofocus>
                            <option value="0">Select Lecture</option>
                            <option value="1">Lecture 1</option>
                            <option value="2">Lecture 2</option>
                        </select>
                    </div><!-- close lecturer filter-->
                    <!-- add spacing for legibility, to be hidden later -->


                </div><!-- close content -->
            </div>
        </div>
    </div>

    <!-- begin message content-->
    <div class="ui-body ui-body-b" id="messageContent">
        <form id="messageForm" onchange="this.form.submit()">
            <!-- message area -->
            <label for="textarea">Type your message:</label>
            <textarea cols="40" rows="8" name="textarea" id="textarea">
                    </textarea>
            <!-- full name -->
            <label for="basic">Enter your full name:</label>
            <input type="text" name="name" id="basic" placeholder="e.g. Cookie Monster" required><input>
            <!-- response date -->
            <label for="date">Request response by:</label>
            <input type="date" id="date" name="newinput" required><input>
            <!-- submit button -->
            <input type="submit" value="Submit">
        </form>
    </div><!-- close message content-->
</div><!-- close content styling -->

＆＃13;

用户从下拉菜单中选择时显示联系表单

1 个答案: