一旦用戶從下拉菜單中選擇顯示聯繫表格

Question

我試圖顯示一個聯繫表格，當用戶從下拉菜單中選擇了他們的「講師」。下拉數據是從數據庫中獲得的，並且顯示正常，我只是無法讓聯繫表單在加載頁面時「隱藏」，並且在選擇講師時顯示「」。任何幫助都會很棒。

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使它可見。

// $.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(); 
 
     } 
 
    });

#messageContent { 
 
      display: none; 
 
     }

<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 -->