jQuery 如何在jquery中选择更改时更新div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/628508/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to update div when on select change in jquery
提问by lpfavreau
I have a form with a select field and a div i wish to update with a value depending on what the user selects.
我有一个带有选择字段和 div 的表单，我希望根据用户选择的内容更新一个值。
Example:
例子：
<select name="mysel" id="msel">
<option value="test1">Test1</option>
<option value="test2">Test2</option>
<option value="test3">Test3</option>
</select>
<div id="myresult"></div>
I would like the div to update with "This is test 2 and other info" if the user selects test2 and so on.
如果用户选择 test2 等，我希望 div 更新为“这是测试 2 和其他信息”。
Any help on this would be greatly appreciated.
对此的任何帮助将不胜感激。
回答by lpfavreau
Try something like that :
尝试这样的事情：
<select id="choose">
<option value="test1">Test1</option>
<option value="test2">Test2</option>
<option value="test3">Test3</option>
</select>
<div id="update"></div>
<script type="text/javascript">
$('#choose').change(function(event) {
$('#update').html('This is ' + $('#choose').val() + ' and other info');
});
</script>
If you want to make it with AJAX, change the javascript function to something like that:
如果你想用 AJAX 来实现，把 javascript 函数改成这样：
<script type="text/javascript">
$('#choose').change(function(event) {
$.post('info.php', { selected: $('#choose').val() },
function(data) {
$('#update').html(data);
}
);
});
</script>
And in your info.php, you'll have something like:
在你的 info.php 中，你会有类似的内容：
<?php
$selected = isset($_POST['selected']) ? $_POST['selected'] : 'nothing';
echo("This is $selected and other info");
回答by Joel
The general idea:
总体思路：
$(function() {
$("#msel").change(function(){
$("#myresult").html("This is " + $("#msel").val() + " and other info");
});
});
With more specifics I can do better. ;-)
有了更多的细节，我可以做得更好。;-)
回答by laurenmichell
This is the simplest way I've found do it (from thishandy forum)
这是我发现的最简单的方法（来自这个方便的论坛）
<!-- the select -->
<select id="thechoices">
<option value="box1">Box 1</option>
<option value="box2">Box 2</option>
<option value="box3">Box 3</option>
</select>
<!-- the DIVs -->
<div id="boxes">
<div id="box1"><p>Box 1 stuff...</p></div>
<div id="box2"><p>Box 2 stuff...</p></div>
<div id="box3"><p>Box 3 stuff...</p></div>
</div>
<!-- the jQuery -->
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript">
$("#thechoices").change(function(){
$("#" + this.value).show().siblings().hide();
});
$("#thechoices").change();
</script>
回答by MRRaja
on document ready
文件准备好
<script type="text/javascript">
$(document).ready(function(){
$('#choose').change(function(event) {
$.post(
'info.php',
$(this).serialize(),
function(data){
$("#update").html(data)
}
);
return false;
});
});
on ajaxComplete
在 ajaxComplete 上
<script type="text/javascript">
$(document).ajaxComplete(function(){
$('#choose').change(function(event) {
$.post(
'info.php',
$(this).serialize(),
function(data){
$("#update").html(data)
}
);
return false;
});
});
