我想通过Ajax将index.php
中的下拉列表的值传递给test.php
中的文本框。
Test.php
在index.php
中出现了iframed。更改下拉列表后,需要在test.php
中更新该下拉列表的值,而无需重新加载页面。
谢谢!
的index.php
<script type="text/javascript">
$(document).ready(function() {
$('#dropdown1').change(function() {
var value = $('#dropdown1').val()
window.location = 'index.php?value=' + value;
})
})
</script>
<body>
<h1>Ajax</h1>
<select id="dropdown1">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
<option value="4">Value 4</option>
</select>
<div>
<iframe src="test.php" frameborder="0"></iframe>
</div>
</body>
test.php的
<body>
<?php
echo "<h1> The Current Value: " . $_GET["value"] . "</h1>";
?>
</body>
答案 0 :(得分:0)
如果通过&#34;没有重新加载页面&#34;你的意思是重新加载index.php你可以像使用目标一样发布到test.php:
<iframe id="test_php"/>
<form target="test_php">
<select onchange="this.parentNode.submit()"/>
</form>
这将要求您的test.php脚本接受帖子并且&#34;重新加载&#34;。
答案 1 :(得分:0)
我之前的回答可能是要走的路 - 简单比复杂更好。
如果你坚持使用ajax(在服务器上存储更改的值),你可以采用两步法:
1使用以下方式更新iframe而无需重新加载:
document.getElementById('iFrameID')。contentWindow.document.body.innerHTML ='Hello changed value!'
2使用ajax更新服务器上的值,不需要回调。