1. 首頁
  2. 問答
  3. 當用戶在下拉列表中選擇揚聲器名稱時，只有揚聲器專家將在下一主題下拉列表中顯示

當用戶在下拉列表中選擇揚聲器名稱時，只有揚聲器專家將在下一主題下拉列表中顯示

2017-09-15 32 views
0

我想要實現的是當用戶在下拉列表中選擇或選擇揚聲器名稱時，只有揚聲器專業知識將會在下一個主題下拉列表中顯示。防爆。當他選擇Cimatu女士時，主題下拉列表只能顯示Cimatu女士熟悉的主題，如Motivational，Entertainment，Healtcare。當用戶選擇桑托斯先生時，主題下拉列表只能顯示他熟知的主題，如商業和技術。順便說一句，下拉列表中顯示的發言者姓名和主題來自我使用select query和mysqli_fetch_array的數據庫。請大家任何建議和幫助，真的很感激。當用戶在下拉列表中選擇揚聲器名稱時，只有揚聲器專家將在下一主題下拉列表中顯示

我已經試過這個解決方案，但是我在這段代碼中的問題是當我添加新的揚聲器，當我選擇他們的名字時它不會顯示任何主題。

<?php 
       $conn = new mysqli($servername, $username, $password, $dbname); 

       $selectspeakers = "SELECT * FROM speakers"; 
       $sp_result = mysqli_query($conn, $selectspeakers); 

       $result = mysqli_query($conn, "SELECT speaker_fullname FROM speakers"); 
       $storeArray = Array(); 
       while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) 
       { 
        $storeArray[] = $row['speaker_fullname'];  
       } 

       $msCimatuTopics = "SELECT speaker_specialization1, speaker_specialization2, speaker_specialization3, speaker_specialization4, speaker_specialization5 FROM speakers WHERE speaker_fullname = '$storeArray[0]' "; 
       $msCimatuTopics_result = mysqli_query($conn, $msCimatuTopics); 

       $mrSantosTopics = "SELECT speaker_specialization1, speaker_specialization2, speaker_specialization3, speaker_specialization4, speaker_specialization5 FROM speakers WHERE speaker_fullname ='$storeArray[1]' "; 
       $mrSantosTopics_result = mysqli_query($conn, $mrSantosTopics); 
    ?> 

    <html> 
    <head> 
    </head> 
    <body> 
    <div class="form-group"> 
    <label for="speaker">Preferred Speaker:</label> 
    <select name="speaker" class="form-control" id="speaker" style='text-transform:capitalize;'> 
    <?php while($array = mysqli_fetch_array($sp_result)):;?> 
     <option value = "<?php echo $array['speaker_fullname'];?>" <?php if($_SESSION["selectedSpeaker"] == $array['speaker_fullname']) echo "selected";?> ><?php echo $array['speaker_fullname'];?></option> 
<?php endwhile;?> 
</select> 
</div> 

<div class="form-group"> 
<label for="msCimatuTopics" id="topicTitle" class="hidden">Topic:</label> 
<select name="topic" class="form-control hidden" id="msCimatuTopics" style='text-transform:capitalize;' autofocus required="required"> 
             <?php $array = mysqli_fetch_array($msCimatuTopics_result);?> 
             <option value = "" <?php if($_SESSION["selectedSpeaker"] == $array['speaker_fullname']) echo "selected";?> >Please Select...</option> 
             <option value = "<?php echo $array['speaker_specialization1'];?>" <?php if ($_POST['topic'] == $array['speaker_specialization1']) echo 'selected="selected"';?> <?php if($_SESSION["selectedSpeaker"] == $array['speaker_fullname']) echo "selected";?> ><?php echo $array['speaker_specialization1'];?></option> 
             <option value = "<?php echo $array['speaker_specialization2'];?>" <?php if ($_POST['topic'] == $array['speaker_specialization2']) echo 'selected="selected"';?> <?php if($_SESSION["selectedSpeaker"] == $array['speaker_fullname']) echo "selected";?> ><?php echo $array['speaker_specialization2'];?></option> 
             <option value = "<?php echo $array['speaker_specialization3'];?>" <?php if ($_POST['topic'] == $array['speaker_specialization3']) echo 'selected="selected"';?> <?php if($_SESSION["selectedSpeaker"] == $array['speaker_fullname']) echo "selected";?> ><?php echo $array['speaker_specialization3'];?></option> 
             <option value = "<?php echo $array['speaker_specialization4'];?>" <?php if ($_POST['topic'] == $array['speaker_specialization4']) echo 'selected="selected"';?> <?php if($_SESSION["selectedSpeaker"] == $array['speaker_fullname']) echo "selected";?> ><?php echo $array['speaker_specialization4'];?></option> 
             <option value = "<?php echo $array['speaker_specialization5'];?>" <?php if ($_POST['topic'] == $array['speaker_specialization5']) echo 'selected="selected"';?> <?php if($_SESSION["selectedSpeaker"] == $array['speaker_fullname']) echo "selected";?> ><?php echo $array['speaker_specialization5'];?></option> 
            </select> 

           <select name="topic" class="form-control hidden" id="mrSantosTopics" style='text-transform:capitalize;' autofocus required="required"> 
             <?php $array = mysqli_fetch_array($mrSantosTopics_result);?> 
             <option value = "" <?php if($_SESSION["selectedSpeaker"] == $array['speaker_fullname']) echo "selected";?> >Please Select...</option> 
             <option value = "<?php echo $array['speaker_specialization1'];?>" <?php if ($_POST['topic'] == $array['speaker_specialization1']) echo 'selected="selected"';?> <?php if($_SESSION["selectedSpeaker"] == $array['speaker_fullname']) echo "selected";?> ><?php echo $array['speaker_specialization1'];?></option> 
             <option value = "<?php echo $array['speaker_specialization2'];?>" <?php if ($_POST['topic'] == $array['speaker_specialization2']) echo 'selected="selected"';?> <?php if($_SESSION["selectedSpeaker"] == $array['speaker_fullname']) echo "selected";?> ><?php echo $array['speaker_specialization2'];?></option> 
             <option value = "<?php echo $array['speaker_specialization3'];?>" <?php if ($_POST['topic'] == $array['speaker_specialization3']) echo 'selected="selected"';?> <?php if($_SESSION["selectedSpeaker"] == $array['speaker_fullname']) echo "selected";?> ><?php echo $array['speaker_specialization3'];?></option> 
             <option value = "<?php echo $array['speaker_specialization4'];?>" <?php if ($_POST['topic'] == $array['speaker_specialization4']) echo 'selected="selected"';?> <?php if($_SESSION["selectedSpeaker"] == $array['speaker_fullname']) echo "selected";?> ><?php echo $array['speaker_specialization4'];?></option> 
             <option value = "<?php echo $array['speaker_specialization5'];?>" <?php if ($_POST['topic'] == $array['speaker_specialization5']) echo 'selected="selected"';?> <?php if($_SESSION["selectedSpeaker"] == $array['speaker_fullname']) echo "selected";?> ><?php echo $array['speaker_specialization5'];?></option> 
            </select> 
           </div> 
     </body> 
     </html> 

    <script>  
     $('#speaker').change(function(){ 
     var selected_item = $(this).val() 
     if(selected_item == "Ms. Cimatu") 
     { 
      $('#msCimatuTopics').val("").removeClass('hidden') 
      $('#topicTitle').val("").removeClass('hidden'); 
      $('#mrSantosTopics').val(selected_item).addClass('hidden'); 
     } 
     else if(selected_item == "Mr. Santos") 
     { 
      $('#mrSantosTopics').val("").removeClass('hidden') 
      $('#topicTitle').val("").removeClass('hidden'); 
      $('#msCimatuTopics').val(selected_item).addClass('hidden'); 
     } 
     else 
     { 
      $('#msCimatuTopics').val(selected_item).addClass('hidden'); 
      $('#mrSantosTopics').val(selected_item).addClass('hidden'); 
      $('#topicTitle').val(selected_item).addClass('hidden'); 
     } 
    }); 
    </script>

這是下拉列表 enter image description here 的形象這是數據庫數據 enter image description here

來源

2017-09-15 Red

+0

請傢伙，我真的需要它 – Red

回答

1

有一些基本的東西，你可以看看你的實施，提高。最大的是你不需要爲不同的數據片段查詢同一個表格。如果您可以在speakers表上運行SELECT *，那麼您可以跳過其餘的查詢。

下一個任務是設法使你的代碼更少地依賴於奇異值。如果您注意到您正在爲值1，值2等寫入相同的代碼，那麼請嘗試考慮如何抽象代碼，以便它可以爲無限數量的值工作。

這是基於實現我所提到的項目示例代碼中一個非常粗略的實現。我沒有測試它所以有可能是你需要調試它適用於你的目的之前，一些小的錯誤方式：

<?php 

    // Based on your code and image these appear to be the fields in the speakers table: 
    // speaker_fullname 
    // speaker_image 
    // speaker_videolink 
    // speaker_specialization1 
    // speaker_specialization2 
    // speaker_specialization3 
    // speaker_specialization4 
    // speaker_specialization5 

    // Make your connection 
    $conn = new mysqli($servername, $username, $password, $dbname); 

    // Get speakers and all their data (you only need one query!) 
    $result = mysqli_query($conn, "SELECT * FROM speakers"); 

    // Store the speakers for later 
    // (You could maybe use this instead but depends on your PHP version:) 
    //  -> http://php.net/manual/en/mysqli-result.fetch-array.php 
    $speaker_array = array(); 
    while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) { 
     $speaker_array[] = $row;  
    }   

    // Apparently you have session values? You don't start the session though? 
    // See: http://php.net/session_start 
    $session_speaker_fullname = (! empty($_SESSION["selectedSpeaker"])) ? $_SESSION["selectedSpeaker"] : ''; 

?> 
<html> 
    <head> 
    </head> 
    <body> 
     <div class="form-group"> 
      <label for="speaker">Preferred Speaker:</label> 
      <select name="speaker" class="form-control" id="speaker" style='text-transform:capitalize;'> 
       <option value=""></option> 
       <?php foreach($speaker_array as $row):;?> 
        <option value="<?php echo $row['speaker_fullname'];?>" 
         <?php if($session_speaker_fullname == $row['speaker_fullname']) echo "selected";?> 
         ><?php echo $row['speaker_fullname'];?></option> 
       <?php endforeach;?> 
      </select> 
     </div> 
     <div class="form-group"> 
      <label for="topic" id="topicTitle" class="hidden">Topic:</label> 
      <select name="topic" class="form-control" id="topic" style='text-transform:capitalize;' autofocus required="required"> 
       <!-- this will get populated via JavaScript -->       
      </select> 
     </div> 
     <script type="text/javascript"> 

      // Let your data be used by JavaScript 
      var speaker_array = <?php echo json_encode($speaker_array); ?>; 

      // A function to update the topic select 
      function update_topic_select_list() { 

       // Clear the current topic list 
       $('#topic').html(''); 

       // Only re-build the topic list if a speaker is selected 
       if ($('#speaker option:selected').val() != '') { 
        var topic_array = Array(); 

        // Find the correct speaker 
        for (var i = 0; i < speaker_array.length; i++) { 

         // The speaker name matches 
         if (speaker_array[i].speaker_name == $('#speaker option:selected').val()) 

          // Add the values to the topic array 
          topic_array.push(speaker_array[i].speaker_specialization1); 
          topic_array.push(speaker_array[i].speaker_specialization2); 
          topic_array.push(speaker_array[i].speaker_specialization3); 
          topic_array.push(speaker_array[i].speaker_specialization4); 
          topic_array.push(speaker_array[i].speaker_specialization5); 

          // Stop the loop 
          break; 
         } 
        } 

        // Update the topic list 
        for (var i = 0; i < topic_array.length; i++) { 

         // Don't add empty values 
         if (topic_array[i] != '') { 
          $('#topic').append('<option value="' + topic_array[i] + '">' + topic_array[i] + '</option>'); 
         } 
        } 
       } 
      } 

      // Watch for changes to the speaker selection 
      $('#speaker').change(function() { 

       // Do you need to do anything else? 

       // Call the update function 
       update_topic_select_list(); 
      }); 

      // Force a change trigger after page load - in case you need that session value set? 
      $('#speaker').trigger('change'); 
     </script> 
    </body> 
</html>

來源

2017-09-15 22:53:54 neuromatter

+0

先生感謝你回答我的問題。我真的很感激它。但是當我嘗試它時，我認爲JavaScript中有一個錯誤，它會顯示「Uncaught SyntaxError：Unexpected token}」它的第四個括號//觀察對揚聲器選擇的更改。請先生幫助我..它是如此令人沮喪，沒有任何人要問，並看教程.. – Red

+0

先生它的工作nowwww！問題是花括號，並且speaker_name應該是speaker_fullname。謝謝你，先生！！我希望上帝給你更多的祝福，幫助像我們這樣的人！ – Red

1

的形象，我建議使用AJAX。這樣，當用戶選擇一個發言者時，Javascript會向服務器請求所選發言者的專業化列表。例如：

<!-- This is your <select> of speakers --> 
<select id="select-speaker"> 
    <?php echo($speaker_options); ?> 
</select> 

<!-- This is your <select> of specializations --> 
<select id="select-specialization"> 
    <option value=""></option> 
</select> 

<!-- This is your JS code --> 
<script> 
    // When users select the speaker, #select-specialization gets updated 
    $("#select-speaker").change(function(){ 
     var speaker = document.getElementById("select-speaker"); 
     GetSpecializations(speaker.value).then(function (data){ 
      document.getElementById("select-specialization").innerHTML = data; 
     }); 
    }); 

    async function GetSpecializations(speaker){ 
     // Request the server via AJAX the list of specializations for that speaker 
     var options = await AjaxPOST("page.php", speaker); 
     // Returns something like "<option value='spec1'>Spec1</option>..." 
     return options; 
    } 
</script>

這只是一個想法。這裏是一個可能實現的AjaxPOST()：

function AjaxPOST(url, speaker){ 
    return new Promise(resolve => { 
     var http = new XMLHttpRequest(); 
     var params = {"sentFromAJAX" : "true", "speaker" : speaker}; 
     http.onreadystatechange = function(){ 
      if (this.readyState == 4 && this.status == 200){ 
       resolve(this.responseText); 
      } 
     }; 
     http.open("POST", url, true); 
     http.setRequestHeader("Content-type", "application/json; charset=utf-8"); 
     http.send(JSON.stringify(params)); 
    }); 
}

This is a basic AJAX tutorial來自W3C和MDN this is a useful article on async/await。

P.S：我沒有測試此代碼。但它應該工作。

P.P.S：它缺少的代碼PHP的一部分。你必須處理從Javascript發送的AJAX請求。請注意，這個代碼在發送JSON編碼的參數，可以使在PHP中，你必須檢索使用類似$_POST變量：$_POST = json_decode(file_get_contents("php://input"), true) ?: [];。

來源

2017-09-15 22:25:34

相關問題

 相關問題