HTMLドロップダウンオプションのPHP変数値onchangeを表示

Question

ドロップダウンメニューから選択したHTMLオプションに応じて、ページを更新せずに表示する3つのPHP変数値があります。私が欲しいもの

<p> 
 
<label for="package" class="formlbl">I want to Enroll In:</label> 
 
    <select name="package" id="package"> 
 
    <option selected="selected" value=""></option> 
 
    <option value="full_package">Complete Package</option> 
 
    <option value="training">Only Training</option> 
 
    <option value="counselling">Only Counselling</option> 
 
    </select> 
 
</p>

彼はトレーニングを選択したときに、それはページを更新することなく、その上の変数がない2とをエコーする必要があり、彼は完全なパッケージを選択したときに、それは変数なし1をエコーすべきです。

私は何をすべきか教えてください。値と変数はコード内で動作しています。

Answer 1

これはおそらく、最も簡単で簡単な方法です。

フィドル例：https://jsfiddle.net/te36zy18/

HTML

<p> 
<label for="package" class="formlbl">I want to Enroll In:</label> 
    <select name="package" id="package"> 
    <option selected="selected" value=""></option> 
    <option value="full_package">Complete Package</option> 
    <option value="training">Only Training</option> 
    <option value="counselling">Only Counselling</option> 
    </select> 
</p> 
<div id="full_package" class="package"><?php echo full_package;?></div> 
<div id="training" class="package"><?php echo training;?></div> 
<div id="counselling" class="package"><?php echo counselling;?></div> 

jQueryの

$("#package").on("change", function(){ 
    var package = $(this).val(); 
    $(".package").hide() 
    $("#" + package).show(); 
}); 

CSS

.package {display: none'} 

Answer 2

PHPはRESP一度だけ、サーバー側の言語であるので、 onseがクライアントに送られると、phpはページ上の何も変更せずにリフレッシュすることができません。

新しいページ（動的コンテンツとも呼ばれます）を再読み込みせずにコンテンツを変更するには、javascriptを使用する必要があります。 jqueryというフレームワークでこれを簡単に行うことができます。このHTMLラインを使用してWebページへ

追加jqueryの：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

してからドロップダウンのために、このHTMLテンプレートを使用して：あなたは `echo`後に行うことはできません

<!-- make each item in your dropdown an <a> with an ID --> 
<ul class="dropdown"> 
    <li onclick="toggleResponse('comp')">Complete </li> 
    <li onclick="toggleResponse('pack')">Package Only </li> 
    <li onclick="toggleResponse('train')">Training Only </li> 
    <li onclick="toggleResponse('couns')">Counselling </li> 
<ul> 

<!-- give every response the same class, and individual IDs --> 
<span class="response" id="comp"><?php echo var1 ?></span> 
<span class="response" id="pack"><?php echo var2 ?></span> 
<span class="response" id="train"><?php echo var3 ?></span> 
<span class="response" id="couns"><?php echo var4 ?></span> 

<style> 
    // let all the responses be hidden initially 
    .response { 
     display: none; 
    } 
</style> 

<script type="text/javascript"> 
    function toggleResponse (id) { 
     // hide any responses that might be showing 
     $('.response').hide(); 
     // show the response for this option 
     $('#' + id).show(); 
    } 
</script>