jsp页面可输入下拉框实现

<HTML> 
<HEAD> 
<META http-equiv='Content-Type' content='text/html; charset=gb2312'> 
<TITLE>可输入的下拉框</TITLE> 
</HEAD> 
<BODY > 
<div style="position:relative;"> 
<span style="margin-left:100px;width:18px;overflow:hidden;"> 
<select style="width:118px;margin-left:-100px" οnchange="this.parentNode.nextSibling.value=this.value"> 
<option value="内容01">内容01</option> 
<option value="内容02"> 内容02</option> 
<option value="内容03"> 内容03</option> 
</select></span><input name="box" style="width:100px;position:absolute;left:0px;"> 
</div>



  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我会尽力回答你的问题。要实现jsp页面二级下拉框联动,需要在jsp页面中引入jQuery架,并编写JavaScript代码来实现。下面是一个简单的示例代码: HTML代码: ``` <select id="select1"> <option value="0">请选择</option> <option value="1">选项1</option> <option value="2">选项2</option> </select> <select id="select2"> <option value="0">请选择</option> </select> ``` JavaScript代码: ``` <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> $(function() { $('#select1').change(function() { var val = $(this).val(); $('#select2').empty(); $('#select2').append('<option value="0">请选择</option>'); if (val != '0') { $.ajax({ type: 'POST', url: 'getData.php', data: {id: val}, dataType: 'json', success:function(data) { for (var i = 0; i < data.length; i++) { $('#select2').append('<option value="' + data[i].id + '">' + data[i].name + '</option>'); } } }); } }); }); </script> ``` 其中,getData.php是一个服务器端的接口,用来从数据库中获取数据。它的代码如下: ``` <?php $conn = mysqli_connect('localhost', 'root', 'root', 'test'); if (!$conn) { die('连接失败: ' . mysqli_error($conn)); } $id = $_POST['id']; $sql = "SELECT * FROM table2 WHERE id1 = $id"; $result = mysqli_query($conn, $sql); $data = array(); while ($row = mysqli_fetch_array($result)) { $item = array( 'id' => $row['id'], 'name' => $row['name'] ); array_push($data, $item); } echo json_encode($data); mysqli_close($conn); ?> ``` 注意,为了保证安全性,应该对输入参数进行过滤和验证。上述代码仅供参考,具体实现需要根据实际情况进行修改和完善。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值