2017-07-31 149 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>