html select下拉菜单 从数据库中读取 ajax

最新推荐文章于 2024-07-31 17:13:00 发布
最新推荐文章于 2024-07-31 17:13:00 发布
阅读量1.4w 收藏 16
点赞数 5
文章标签： 数据库 html ajax select
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ChasonLIU/article/details/50014151
版权

    首先

    html中：

<span style="font-size:18px;"> <td>港口名称：</td>
 <td>
    <select name="ttc_portname" id="ttc_portname"  style="width:158px;">
    </select>
</td></span>
    下面为给下拉菜单赋值：
     在body中我们定义一个onload函数：
 
<span style="font-size:18px;"> <body  οnlοad="getCHART_NAME()">
   
</span>
    然后在js中定义函数

  

<span style="font-size:18px;"> function getPORT_NAME()//港口字段 下拉菜单自动从数据库中读取填充
    {
       var str="select 字段名 from 数据库名 t group by 字段名";
       ajax(str);
     }
 下面我们写异步传输ajax：

 function ajax(str)
    {
     if (xmlhttp!=null)
     {
      xmlhttp.onreadystatechange=function()
       {
        if (xmlhttp.readyState==4 &&xmlhttp.status==200)
         {
          document.getElementById_x_x("ttc_portname").innerHTML=xmlhttp.responseText;
         // 此时接受到后台传来的str语句添加到innerHTML，即完成下拉菜单的赋值
         }
       };
      
      }
       var src ="/tjhc/ajax/1.jsp?str=" + str; / /此处为ajax后台地址，我们将语句传输到后台
      xmlhttp.open("POST",src,true);
      xmlhttp.send();   
    }

 以下为后台

   String sql =request.getParameter("str");

    String def=request.getParameter("def");
    if(def!=null)
    def = newString(def.getBytes("ISO-8859-1"),"utf-8");
    else
    def="";
    String str ="";
    StringPORT_NAME="";
    ConnectionmyConn = new ConnDB().getConn();
   
    if(sql!=null&&(sql!="")&&!sql.equals("null"))
    {
      PreparedStatement mySta = myConn.prepareStatement(sql);
       ResultSet rs= mySta.executeQuery();
      while(rs.next())
        {
          PORT_NAME= rs.getString("PORT_NAME");
          if(PORT_NAME != "" && PORT_NAME!= null)
          {
              if (PORT_NAME.equals(def))
              {
                   str +=""+PORT_NAME+"";
              }
              else
              {
                str +=""+ PORT_NAME +"";
             }
          }
            
         }
      out.print(str);//将str传输到ajax
      rs.close();
      mySta.close();
    }


若我们有多个下拉菜单，可以分多个ajax 一个处理完在下面激活另一函数，以此类推！


</span>

 

ChasonLIU
关注
  • 5
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue前端实现从数据库获取数据的下拉框以及带参请求
Akashic_ether的博客
03-03 9596
一、下拉框的实现 <el-form-item> <el-select @change="getOptions" v-model="type" placeholder="请选择轮播类型" style=""> <el-option v-for="(item,index) in objData" :key="index" :va...
ajax实现数据库获取select二级联动下拉菜单
夜空下的凝视
05-18 3275
HTML内容： <li> <span>一级分类：</span> <select name="yjid" class="yjid"> <option value="">---所属分类---</option> <volist name="list" id="vo"> ...
下拉菜单从数据库读取数据动态生成
qq_33543227的博客
11-22 9365
一、页面index.ftl<html> <head> <meta charset="utf-8"> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <form action="",method="POST">
html 下拉菜单select 获取数据库内容
热门推荐
hello
01-08 2万+
用ajax去后台数据库中访问数据，操作select <select id="mySelect"> <option>请选择</option> </select> 前台js： <script> $(document).ready(function () { var url="·····/com...
Web多级联动下拉框（从数据库中获取数据，MVC模式,使用的是tomcat）
weixin_44255794的博客
06-26 1570
一、文件位置 java代码的位置 二、先编写一个jsp页面用来跳转到多级下拉框的jsp页面 随便编一个就行了,这里就叫index.jsp 1.index.jsp <%@ page language=“java” pageEncoding=“UTF-8”%> <%@ page contentType=“text/html;charset=UTF-8” import=“edu.m...
前台页面从数据库中获取下拉框值
没有简介
11-16 605
从数据库中读取下拉框中数据
Ajax实现下拉列表从数据库读取数据级联
05-20
本文将深入探讨如何使用Ajax实现下拉列表（Dropdown List）从数据库读取数据并实现级联效果。级联下拉列表通常用于关联数据的筛选，例如省份-城市-区县的选择，当用户在一级下拉列表中选择一个选项时，二级下拉列表...
php+ajax 实现输入读取数据库显示匹配信息
12-19
用户在搜索框中输入时，AJAX请求会异步发送到服务器，服务器从数据库中获取匹配项，然后将结果显示回页面，所有这些操作都在不刷新整个页面的情况下完成。这种方法提高了用户体验，因为用户可以看到即时反馈，而无需...
下拉列表从数据库读取数据级联
04-08
总的来说，通过结合HTML、JavaScript和服务器端脚本，我们可以实现下拉列表从数据库读取数据的级联效果。这个过程中，Ajax起到了关键作用，它允许我们在不刷新页面的情况下与服务器进行交互，提高了用户体验。记住，...
jsp从数据库获取数据填充下拉框实现二级联动菜单的方法
01-20
总结来说，实现JSP中从数据库获取数据填充下拉框并实现二级联动菜单，主要涉及以下几个步骤： 1. 在JSP页面上创建下拉框，设置onChange事件。 2. 后台Service和DAO层处理数据，获取并处理一级菜单数据。 3. 实体类...
ajax异步读取后台传递回的下拉选项的值方法
12-29
jsp中html相关代码 请选择展会： <select name=select id=jieci onchange=getChange()> 选择展会 </select> [removed] loadjieci('- 选择展会 -'); [removed]  * <span
mysql一次性获取几十万数据_mysql随机获取一条或者多条数据
weixin_39687359的博客
12-05 1981
mysql随机获取一条或者多条数据 - osc_rm0mt9zx的个人空间 - OSCHINA - 中文开源技术交流社区​my.oschina.net网上的方案都不是很靠谱select * from users order by rand() LIMIT 1 SELECT * FROM users AS t1 JOIN (SELECT ROUND(RAND() * ((SELECT MAX(use...
html表单select下拉选项通过php从mysql动态获取的两种方法
qq_29705759的博客
07-07 1817
html表单select下拉选项通过php从mysql动态获取的一种方法。 实现功能：mysql表新增行后，会成为下拉菜单的新选项。
html js 从数据库里面 读取 select 内容,下拉框中的值从数据库动态获取
weixin_39629269的博客
06-04 2574
以t_crash_log表中的三个字段即手机类型、运营商和应用版本作为查询字段，查询字段的值即是我们要从数据库中动态获取放在下拉框中的。部分代码如下：1. jsp中定义三个select标签手机类型：运营商：应用版本：2.js/**获取供查询的下拉列表框选项值 */function getQueryCrashLog(){var optionsDev="全部";var optionsNet="全部"...
html获取数据库下拉列表框,如何获取数据库数据显示在select下拉框中
weixin_42509774的博客
06-04 2602
js代码：function addselect() {connect("gClass", "all", null, function (res) { //这里gClass，all分别为后台的类、方法for (var i of res) {addNew('.add_select_cname', i)}//console.log(res)})}function addNew(name, mess...
使用ajax从数据库动态加载下拉框(select)数据，可编辑下拉框。
明天你好
03-29 2万+
<div style="position:relative;"> <span style="margin-left:100px;width:18px;overflow:hidden;"> <select id="change" name="property" style="width:118px;margin-left:-100px" onchange="this.parentNod
简单的 mongoDB 学习
最新发布
qq_19342829的博客
07-31 356
mongodb入门学习整理
html vue实现下拉菜单 从数据库调
06-10
好的，下拉菜单可以使用HTML和Vue来实现，从数据库中调用数据可以使用后端技术（如PHP、Node.js等）来完成。 首先，在HTML中可以使用`<select>`标签来创建下拉菜单，例如： ```html <select> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> ``` 这里的`<option>`标签是下拉菜单的选项，`value`属性是选项的值，`<select>`标签的`name`属性可以用来提交表单数据。 接着，我们可以使用Vue来动态生成选项。首先，在HTML中定义一个Vue实例： ```html <div id="app"> <select v-model="selected"> <option v-for="item in options" :value="item.id">{{ item.name }}</option> </select> </div> ``` 这里的`v-for`指令可以遍历`options`数组中的数据，`:value`和`{{ item.name }}`分别表示选项的值和展示的文本。`v-model`指令可以绑定选中的值到Vue实例的`selected`属性。 然后，在Vue实例中定义`options`数组，并从数据库中获取数据： ```javascript var app = new Vue({ el: '#app', data: { selected: '', options: [] }, mounted: function () { var self = this; axios.get('/api/options') .then(function (response) { self.options = response.data; }) .catch(function (error) { console.log(error); }); } }); ``` 这里使用了Axios库来发起HTTP请求，从`/api/options`接口获取数据，然后将数据赋值给`options`数组。 最后，在后端代码中提供`/api/options`接口，从数据库中获取数据并返回JSON格式的数据即可。 这样就可以实现从数据库中获取数据并生成下拉菜单了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值