PHP和Jquery，如何將選擇的選項值發布到跨度中

Question

我想在沒有提交按鈕的情況下將選定選項的值發布到跨度/標簽中嗎？該怎么做？ 我已經用輸入文本框做到了，但是有了選擇選項，我做不到……

這是我的實際代碼：

<script type="text/javascript">

function calculateTotal() {

    var totalAmt = document.addem.total.value;
    totalR = eval(document.addem.tb1.value * 0.8);

    document.getElementById('update').innerHTML = totalR;
}

  </script>
  <div id="swag">   
  <form name="addem" id="addem">
  <select name="simulate_option" id="simulate_opt">
   <option value="EUR" selected="selected">EUR</option>
    <option value="USD">USD</option>
    <option value="CHF">CHF</option>
    <option value="GBP">GBP</option>
    <option value="RON">RON</option>
    <option value="CZK">CZK</option>
    <option value="NOK">NOK</option>
    <option value="DKK">DKK</option>
    <option value="LVL">LVL</option>
    <option value="TRY">TRY</option>
    <option value="HRK">HRK</option>
    <option value="SEK">SEK</option>
    <option value="PLN">PLN</option>
    <option value="HUF">HUF</option>
    <option value="MXN">MXN</option>
    <option value="CAD">CAD</option>
    </select>   
<input type="text" name="tb1" onkeyup="calculateTotal()"/>   
<span class="swag" id="update">0</span>
<input type="hidden" name="total" value="0"/>
     </form>

Answer 1

這段JavaScript代碼應該會有所幫助。

//runs when a value is changed in the combobox.
var dropdown = document.getElementById("simulate_opt");
dropdown.onchange = function(event){
    //loads data from combobox.
    var val = dropdownoptions[simulate_opt.slectedIndex].value;
    //CHANGE THESE 2 strings.
    Ajax("id of div to be changed", "url to the php file", array(val));
}

//A basic dynamic javascript function for AJAX
//div is div to be changed, url = url to php file.
//vars = array with items to be send via Post
function Ajax(div, url, vars){
    var xml = new XMLHttpRequest(); //wont work in ie7 or lower
    xml.onreadystatechange=function(){
        if(xml.readyState==4 && xml.status==200){
            document.getElementById(div).innerHTML=xml.responseText;
        }
    };
    xml.open("POST",URL,true);
    xml.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    sendXML(xml, vars);
}

function sendXML(xml, vars){
    var send = "";
    var i = 1;
    for(var x in vars){
        y = vars[x];
        send = send+"&var"+i+"="+y;
        i++;
    }
    xml.send(send);
}

然后有一個這樣的PHP文件。

<?php
$var = $_POST['var1'] //loads the selected value
echo $var;  //shows selected value.
?>

Ajax函數可用於實時更新頁面，而無需刷新。 它調用一個php腳本，然后可以用echo修改一個div。 給Ajax函數一個將由php更改的div的ID，將URL更改為php，並將來自客戶端的php需要的所有變量放入數組中作為第三個變量。

//for instance
Ajax("header", "loadHeader.php", Array("hello"."world");
//In php the array items are obtainable as follows.
$_POST['var1']; // this is "hello"
$_POST['var2']; // this is "world"
//if any more array items were added they would've been.
$_POST['var3']; //etc for as much as were set.