在jquery中选择更改时如何更新div答案

【问题标题】：How to update div when on select change in jquery在jquery中选择更改时如何更新div
【发布时间】：2010-10-12 07:49:59
【问题描述】：

我有一个带有选择字段和 div 的表单，我希望根据用户选择的内容更新一个值。

例子：

<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>

如果用户选择 test2 等，我希望 div 更新为“这是测试 2 和其他信息”。

对此的任何帮助将不胜感激。

【问题讨论】：

您需要转义您的 HTML。它被 SO 吃掉了。

标签： jquery forms

【解决方案1】：

尝试类似的方法：

<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>

如果你想用 AJAX 来实现，把 javascript 函数改成这样：

<script type="text/javascript">
    $('#choose').change(function(event) {
        $.post('info.php', { selected: $('#choose').val() },
            function(data) {
                $('#update').html(data);
            }
        );            
    });
</script>

在你的 info.php 中，你会有类似的东西：

<?php

    $selected = isset($_POST['selected']) ? $_POST['selected'] : 'nothing';
    echo("This is $selected and other info");

【讨论】：

感谢两位的精彩回复，我希望它通过 ajax 将选择的值发送到 php 文件，这样我可以使用开关将数据发送回分区。我可以做的 php 部分，但执行 ajax 调用是我迷路的地方。再次感谢您的帮助。
给你，但请更新（通过在底部添加）原始问题，以便寻找类似答案的人可以从中受益。

【解决方案2】：

总体思路：

$(function() {
   $("#msel").change(function(){
      $("#myresult").html("This is " + $("#msel").val() + " and other info");
   });
});

有了更多细节，我可以做得更好。 ;-)

【讨论】：

【解决方案3】：

这是我发现的最简单的方法（来自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>

【讨论】：

【解决方案4】：

文件准备就绪

<script type="text/javascript">
    $(document).ready(function(){
        $('#choose').change(function(event) {    
          $.post(
           'info.php',
            $(this).serialize(),
            function(data){
              $("#update").html(data)
            }
          );
          return false;   
        });   
    });

关于 ajaxComplete

<script type="text/javascript">
    $(document).ajaxComplete(function(){
        $('#choose').change(function(event) {    
          $.post(
           'info.php',
            $(this).serialize(),
            function(data){
              $("#update").html(data)
            }
          );
          return false;   
        });   
    });

【讨论】：