php Dropdownリアルタイムアップデート

Question

これまでに返信されたことがありましたが、私は検索しましたが、他の投稿で尋ねられた質問に対しては回答を見たことがありません。私が見た回答は私の質問に関係しませんでした（主に、mysqlの結果を得るドロップダウンと関係しています）。

私は値（1,2,3）を選択する必要があるphpドロップダウンリストを持っています。選択した内容に基づいて、リストは変数を更新し、非表示のdivタグを表示する必要があります。今私が集めた情報から、これはphpだけではできないようですが、javscriptやajaxスクリプトが必要です。

PHP：

<form> 
    <select name="options" onchange="{dosomething}"> 
     <option value="0">[Select value]</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select><br> 
</form> 

これはその後、リアルタイムでこの変数とのdivを更新する必要があります：

<div id="test" style="display:none"> 
    $answer= 1 + $value 
    <?php 
     echo "1 + $value = $answer"; 
</div> 

のjavascript/AJAX：

<script> 
    function dosomething { 
     #update $value based on dropdown and do calculation 
     #unhide div with id "test" 
    } 
</script> 

を私が言及する必要があります私には知識がないjavascriptまたはajaxの端。

Answer 1

PHPファイル

<form> 
    <select id="dropdown" name="options"> 
     <option value="0">[Select value]</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select><br> 
</form> 

<!-- Possibly some other code --> 

<div id="dropdown-result" style="display: none;"></div> 

はJavaScript

document.querySelector('#dropdown').addEventListener('change', function() { 
    var selectedValue = this.options[this.selectedIndex].value; 
    if (selectedValue) { 
     var request = new XMLHttpRequest(); 
     request.open('GET', '/path/to/your/php-script.php?value=' + selectedValue, true); 
     request.onload = function() { 
      if (request.status >= 200 && request.status < 400) { 
       var dropdownResult = document.querySelector('#dropdown-result'); 
       dropdownResult.innerHTML = request.responseText; 
       dropdownResult.style.display = ''; 
      } 
     }; 
     request.send(); 
    } 
}); 

これはどこかのサーバー上の順番にあなたが別のPHPスクリプトを必要があることを意味AJAXを介してDIVのコンテンツをロードする（JavaScriptで'/path/to/your/php-script.php'コード）。選択した値（'1'、'2'など）を$_GET['value']まで取得できます。あなただけの最後のdivの下にこのスクリプトを追加サーバーに何かを要求することなく、同じページで新しい結果を表示する必要がある場合はどのようなあなたのそのスクリプト内echo()は隠されたdivの

Answer 2

の内容になります。

<script> 

var element = document.getElementsByName('options'); 
if(element.length > 0){ 
    element[0].addEventListener('change',update_text,false); 
     //element[0].addEventListener('change',function(){update_text(param)},false); 
} 

function update_text(evt){ 
    console.log(evt); 
    var first_element = evt.target; 
    var selection = first_element.options[first_element.selectedIndex].value; 
    //do math: 
    selection = +selection + 1; //this cast selection as number and not as String 

    console.log(selection); 
    var test = document.getElementById('test'); 
    test.style.display = 'block'; 
    test.innerHTML = `<p>${selection}</p>`; 
}; 

</script>