前端下拉框选择和动态生成调用div

进入到一个项目期中，一边做项目，一边学习其中用到的知识。这些知识都是零碎的，有数据库，有html，有js，还有django。趁周末时间，整理前面遇到过的前端相关的知识点。

1|0下拉框选择


 

<html>

     <head>
         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
         <script type="text/javascript">
             function doSome(){
                 alert($("#select_id option:selected").text());//方法一：获取select标签选中的option中的文本。
                 alert($("#select_id").find("option:selected").text());//方法二：获取select标签选中的option中的文本。
                alert($("#select_id option:selected").val());//方法一：获取select标签选中的option中的value的值。
                alert($("#select_id").find("option:selected").val());//方法二：获取select标签选中的option中的value的值。
                
                alert($(".select_class option:selected").text());//通过classname来来实现以上功能
            }
         </script>
     </head>
      

    <body>
        
        <div>
            <select id="select_id",onchange="doSome();">
                <option value="aa">bb</option>
                 <option>cc</option>
                  <option>dd</option>
             </select>
         </div>
        
        <div>
             <select class="select_class",onchange="doSome();">
                 <option value="aa">bb</option>
                 <option>cc</option>
                  <option>dd</option>
             </select>
         </div>
         
     </body>
</html>

 

 

 

2|0js绑定事件三种方式


在JavaScript中，有三种常用的绑定事件的方法：

  1. 在DOM元素中直接绑定；
  2. 在JavaScript代码中绑定；
  3. 绑定事件监听函数。

 

1.嵌入dom

<button onclick="open()">按钮</button>

<script>
function open(){
    alert(1)
}
</script>

2.直接绑定

<button id="btn">按钮</button>
<script>
document.getElementById('btn').onclick = function(){
    alert(1)
}
</script>

3.事件监听

<button id="btn">按钮</button>
<script>
document.getElementById('btn').addEventListener('click',function(){
    alert(1)
})

})
</script>

 

用 "addeventlistener" 可以绑定多次同一个事件，且都会执行，而在DOM结构如果绑定两个 "onclick" 事件，只会执行第一个；在脚本通过匿名函数的方式绑定的只会执行最后一个事件。

js绑定的方法：

1 $(document).ready(function(){
2   $("#clickme").click(function(){
3        alert("Hello World  click");
4   })
5 });

 

3|0动态添加元素


 1 <html>
 2     <head>
 3         <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 4         <script type="text/javascript">
 5          $(document).ready(function(){
 6          $(".main").append("<h2>and me</h2>");
 7          
 8          for(var i=0;i<4;i++)
 9          {
10          
11            $(".main").append("<div id=\'ul_"+i+"\'> </div>");
12          }
13         });
14         </script>
15     </head>
16     <body>
17     
18         <div class="main">
19          <h1>only for</h1>
20        </div>
21   
22     </body>
23     
24 </html>

 

实现效果如下，可以看到新添加的div的id都是动态生成的。

如果想在新添加的元素中动态添加值，那么实现如下：

 

 1 <html>
 2     <head>
 3         <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 4         <script type="text/javascript">
 5          $(document).ready(function(){
 6          $(".main").append("<h2>and me</h2>");
 7          
 8          for(var i=0;i<4;i++)
 9          {
10            
11          
12            $(".main").append("<div id=\'ul_"+i+"\'> </div>");
13            
14            html_p = "<p>"+i+"</p>";
15            $('#ul_'+i).append(html_p);
16          }
17         });
18         </script>
19     </head>
20     <body>
21     
22         <div class="main">
23          <h1>only for</h1>
24        </div>
25   
26     </body>
27     
28 </html>

 

 

 

 


__EOF__

本文作者：goldsunshine
本文链接：https://www.cnblogs.com/goldsunshine/p/9384667.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   金色旭光  阅读(4756)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
点击右上角即可分享
微信分享提示
AI IDE Trae