相关文章推荐
刚分手的钱包  ·  Flask动态表单:Quiz信息无法存入SQ ...·  3 周前    · 
健壮的野马  ·  介绍几个图论和复杂网络的程序库 —— ...·  1 年前    · 
傻傻的地瓜  ·  TypeError: Cannot ...·  2 年前    · 
俊逸的香菇  ·  【泡泡点云时空】用于闭环检测的LiDAR ...·  2 年前    · 
被表白的米饭  ·  javascript - Cannot ...·  2 年前    · 
逆袭的豆腐  ·  Python爬虫——学习字体反爬获取某招聘信 ...·  2 年前    · 
Code  ›  下拉选项和操作开发者社区
select option
https://cloud.tencent.com/developer/ask/sof/100025836
发呆的人字拖
2 年前
首页
学习
活动
专区
工具
TVP 最新优惠活动
返回腾讯云官网
提问

问 下拉选项和操作

Stack Overflow用户
提问于 2013-03-28 18:36:56
EN

我有一个下拉列表,里面有我的选择。单击该选项时,必须分别显示字段。比如option1 ==一个文本框,option2 ==两个文本框等等……

<select id="dropdown">
    <option value="A">option1</option>
    <option value="B">option2</option>
    <option value="C">option3</option>
    <option value="D">option4</option>
</select>

单击option1时,必须显示一个字段。在option2上有两个字段..我是javascript和html的新手。请帮助朋友们..

2 13.1K 0 票数 5
EN
javascript
html
select
drop-down-menu

回答 2

Stack Overflow用户

发布于 2013-03-28 18:52:22

如果你可以使用jquery,它可以像下面这样完成。在change上,选择包含要显示的文本框数量的数据属性。然后for循环遍历它们并追加。

Html:

<select id="dropdown">
    <option value="A" data-number="1">option1</option>
    <option value="B" data-number="2">option2</option>
    <option value="C" data-number="3">option3</option>
    <option value="D" data-number="4">option4</option>
</select>
<div id="textBoxContainer">
</div>

Javascript:

$('#dropdown').change(function(){
    $('#textBoxContainer').empty();
    var number = $(this).find('option:selected').attr('data-number');
    for (var i = 0; i < number; i++){
          $('#textBoxContainer').append('<input type="text"/>');
});
票数 5
EN

Stack Overflow用户

发布于 2013-03-28 18:39:23

<select id="dropdown" onChange="showHide()">
    <option value="A">option1</option>
    <option value="B">option2</option>
    <option value="C">option3</option>
    <option value="D">option4</option>
</select>
 function showHide()
   hideAll();
  var val = document.getElementById("dropdown").value;
  if(val == "A")
   document.getElementById("firstTextBoxId").style.display = 'block';
  else if(val == "B")
   document.getElementById("secondTextBoxId").style.display = 'block';
  else if(val == "C")
   document.getElementById("ThirdTextBoxId").style.display = 'block';
  else if(val == "D")
   document.getElementById("FourthTextBoxId").style.display = 'block';
function hideAll()
 
推荐文章
刚分手的钱包  ·  Flask动态表单:Quiz信息无法存入SQLite数据库,求排查
3 周前
健壮的野马  ·  介绍几个图论和复杂网络的程序库 —— BGL,QuickGraph,igraph和NetworkX-CSDN博客
1 年前
傻傻的地瓜  ·  TypeError: Cannot read property 'url' of undefined_沉寂于当下的技术博客_51CTO博客
2 年前
俊逸的香菇  ·  【泡泡点云时空】用于闭环检测的LiDAR Iris|傅里叶|lidar|滤波器|算法_网易订阅
2 年前
被表白的米饭  ·  javascript - Cannot read property 'filter' of undefined error - Stack Overflow
2 年前
逆袭的豆腐  ·  Python爬虫——学习字体反爬获取某招聘信息 - 白巧克力LIN - 简书
2 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号