php Dropdown實時更新

我很抱歉，如果這已被回答之前，但我確實做了搜索，並沒有看到任何其他職位問題的答案。我所看到的答案與我的問題沒有關係（主要是關於從mysql獲得結果的下拉菜單）。php Dropdown實時更新

我有一個php下拉列表，你需要選擇一個值（1,2或3）。根據您選擇的內容，列表應更新變量並顯示隱藏的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的邊緣。

來源

2017-07-18 johnslippers

將其包含在您的html頭部。。爲您的選擇添加一個id =「選項」。添加以下代碼$（「＃test」）。html（$（「#options option：selected」）.text（）））;在你的dosomething功能，它應該工作。 – user8271644

如果您使用jQuery，您可以使用$（'select'）。on（'change'，function（）{}）;將事件偵聽器添加到選擇框中;'在此函數中，使用' $ .ajax'或'$ .getJSON'並更新並在回調函數中顯示您的div。 – user1915746

加載一個80KB庫，實現這樣一個簡單的任務真的不是要走的路 – BlueBockser

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

這將加載通過AJAX，在div這反過來又意味着你在JavaScript需要一個單獨的PHP腳本某處的服務器（'/path/to/your/php-script.php'上的內容碼）。在那裏你可以通過$_GET['value']獲得選定的值（'1','2'等）。不管你echo()該腳本會隱藏div的內容

來源

2017-07-18 15:38:03 BlueBockser

感謝BlueBockser，但獲取未捕獲TypeError：無法讀取null的屬性'addEventListener' – johnslippers

@johnslippers您是否在您的PHP中包含'id =「dropdown」文件？如果不是，它顯然無法找到下拉菜單 – BlueBockser

是的。我用你的我的版本取代了我的選擇。 – johnslippers

如果您只需要查看在同一頁面的新的成績沒有要求的東西給服務器添加您的最後一個div下面這個腳本：

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

來源

2017-07-19 02:13:02

php Dropdown實時更新

回答

相關問題