jquery中如何让下拉列表绑定div，切换下拉选项通过ajax改变div内容？

童话i
    18711835

    我想实现这种效果，让下拉列表绑定div，切换下拉列表改变div内容，
    假设有3个下拉选项，
    选第1个，通过ajax加载1.html的内容；
    选第2个，通过ajax加载2.html的内容；
    选第3个，通过ajax加载3.html的内容；
    用jquery中如何实现它？我不懂js所以写不出来。
    给一段简单的示例代码吧，谢谢！
    图片描述

    html5htmlangularjsjqueryjavascript
    回复
    阅读 2.2k
    1 个回答
    得票最新
    agui1989
      4.6k11136189
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
 <div class="row">
     请选择：
  <select class="myselect">
      <option value="1">1.html</option>
      <option value="2">2.html</option>
      <option value="3">3.html</option>
  </select>     
</div>   
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script>

var ajaxdata=[];

$(".myselect").change(function(){
    var num=$(".myselect").val();
    if(ajaxdata[num]){return;}

    var url=num+".html";//这个url要确定能正常访问
    $.post(url,function(d){
        console.log(d)
        ajaxdata[num]=d;
        doSomething(d);
    })
})

function deSomething(d){
    ////在这里操作ajax返回的数据
}

</script>
      回复
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏
      21861