2017-07-31 202 views
0

我想知道如何用onchange函數之後的新數據替換帶有數據的div。如何在提交後用其他內容替換div內容

看到一些答案,我決定改變我的帖子,使其更清楚我想做什麼。

我有一個數據庫從數據來的div。 裏面的div也有選擇,所以用戶可以更改行

現在我想要的是,如果用戶選擇一種顏色,它會調用ajax.php來更改數據庫,然後它必須返回新的價值。

所以

<div> 
<table> 
<tr> 
    <td><select><option value="1">red</option><option value="2">Blue</option></select><td> 
    <td>Rest of the data from the database</td> 
</tr> 
</table> 
</div> 

現在,當用戶改變了顏色 結果現在應該

<div> 
<table> 
<tr bgcolor="red"> <-- this is new data 
    <td><select><option value="1">red</option><option value="2">Blue</option></select><td> 
    <td>Rest of the data from the database</td> 
</tr> 
</table> 
</div> 

見例如 enter image description here

正如你所看到的第一行是哪裏用戶可以更改顏色。

+0

所以你面對的是什麼問題?而且不要把java-script/jQuery語法與其他對象混合使用。純粹使用任何一種。 –

+0

在變化事件上使用jquery。閱讀文檔https://api.jquery.com/change/ –

+1

你的html中的#container在哪裏? –

回答

0

我認爲,因爲我明白你的問題,你的代碼應該看起來像下面。

<script> 

    function chk(obj) 
    { 
     var name=$(obj).val(); 
     var dataString='name='+ name; 
     $.ajax({ 
      type: "POST", 
      url: "ajax.php", 
      data: dataString, 
      success: function(returnedData) { 
       $('#container').html(returnedData); 
      } 
     }); 
     return false; 
    } 

</script> 


<div class="data" > 

    here is some data that comes from mysql database. 

    <form method="post" action="" id="formSearch"> 

     <select name="color" class="test" id="name" onchange="chk(this);"> 
      <option value="0"></option> 
      <option value="1" style="background-color: #ff0000"></option> 
      <option value="2" style="background-color: #3000ff"></option> 
      <option value="3" style="background-color: #36ff00"></option> 
      <option value="4" style="background-color: #e400ff"></option> 
      <option value="5" style="background-color: #fff000"></option> 
     </select> 

    </form> 

    <div id="container"> 

    </div> 

</div>