JS中的下拉框详解

最新推荐文章于 2023-02-13 10:37:00 发布
最新推荐文章于 2023-02-13 10:37:00 发布
阅读量3k 收藏 1
点赞数
文章标签： javascript function button input table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mcy478643968/article/details/3556295
版权

1 option是一个对象,可以用document对象调用createElement("option")来创建一个对
option对象,再调用这个对象的属性text来给option来赋值. option.text="值";
2 newOption=new Option("郑州市",zhengzhou);
第一个是text,第二个是value.

示例1(用第一种方法):
<html>
<head>
 <title>下拉框详解</title>
 <script language="javascript">
  function add(){
   //这个下拉框的对象
   var  obj=document.myform.Cats;
   //创建一个option标签
   var japan=document.createElement("option");
   //将从文本框获取的值赋予下拉框对象的text属性，而不是value属性
   japan.text=document.myform.car.value;
   //调用下拉框对象的add方法来增加一个下拉项
   document.myform.Cats.add(japan);
   //select对象的长度
   alert(obj.length);
   //被选择的项的索引
   alert(obj.selectedIndex);
   //被选中的项的value值
   alert(obj.value);
  }
 </script>
</head>
<body>
<table align="center">
 <form name="myform">
  <SELECT NAME="Cats" SIZE="1">
      <OPTION VALUE="我是一辆宝马车" selected="selected">宝马
   <OPTION VALUE="2">奔驰
   <OPTION VALUE="3">奥迪
  </SELECT>
  <br>
  <input type="text" name="car">
  <br>
        <input type="button" value="添加一个新的品牌" onClick="add()"></OPTION>
 </form>
</table>

</body>
</html>

---------------------------------------------------------------------------------

示例2(用第二种方法)

<html>
<head>
<title>省市级联</title>
 <script language="javascript">
 function changeCity(){
  var province=document.myform.province.value;
  switch(province){
   case "sichuan":
    newOption1=new Option("成都市","chengdu");
    newOption2=new Option("泸州市","luzhou");
    break;
   case "shangdong":
    newOption1=new Option("青岛市","qingdao");
    newOption2=new Option("烟台市","yantai");
    break;
   case "hubie":
    newOption1=new Option("武汉市","wuhan");
    newOption1=new Option("襄樊市","wuhan");
    
  }
  //option的数组
  document.myform.selCity.length=0;
  //与select的对象的add()方法实现同样的功能
  document.myform.selCity.add(newOption1);
  document.myform.selCity.add(newOption2);
 }
 
  
 </script>
</head>

<body>
<form name="myform">
 <table align="center">
  <tr>
   <td>姓名:</td>
   <td><input type="text" /></td>
  </tr>
  <tr>
   <td>省份:</td>
   <td>
    <select name="province" onChange="changeCity()">
     <option>请选择省份</option>
     <option value="sichuan">四川</option>
     <option value="shangdong">山东</option>
     <option value="hubie">湖北</option>
    </select>
   </td>
   <tr>
    <td>城市:</td>
    <td>
     <select name="selCity">
      <option>请选择城市</option>
     </select>
    </td>
   </tr>
  </tr>
    </table>
</form>
</body>
</html>

跃睿
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS 实现下拉框回显
zzvar的博客
05-29 3747
JS 实现下拉框回显学习内容：需求总结： 学习内容： 需求 用 JS 实现下拉框回显 实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>下拉框回显</title> <script src="/static/jQuery-
JS 实现下拉框去重
zzvar的博客
05-29 1102
JS 实现列表移动学习内容：需求总结： 学习内容： 需求 用 JS 下拉框去重 实现代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>下拉框去重</title> <script type="text/javascript" src="/static/jQuery-1.11/jquery-
下拉框的内容通过js插入到table中
07-10
下拉框的内容通过js的insertRow插入到table中,通过delRow删除table中的行
添加一个页面，html+js实现下拉框、按钮、表格（固定表头）
最新发布
sxww_zyt的博客
02-13 1413
本篇记录了使用element ui的样式输出下拉框、固定表头的表格，仅做学习记录，如有更好的办法，请斧正~
JTable中放入下拉框
来日可期的博客
09-24 1289
//创建表格的表头内容数组 String[] names = { "项目备案号", "管段编号", "管段属性", "管段类型" }; //创建表格的内容数组，因为是多行多列所以是二维数组 String[][] obj = {{"","","",""}}; //初始化表格模板 TableModel tableModel = new DefaultTableModel(obj,names); //使用表格模板创建表格 JTable table = new JTable(tableModel); // 设置此表
js 动态下拉框
qq_38220837的博客
07-06 1821
在项目中使用输入值的下拉框，实现手动输入值，动态ajax请求后台 返回动态选择内容。
datatable.js在表格中添加下拉列表
a349646187的博客
07-18 2617
引入datatable.css,datatable.js body里写下完整的table格式 <table id="table1" class="table table-hover mb-none table-striped table-bordered" style="border-collapse: collapse;"> <thead> <...
bootstrap suggest下拉框使用详解
10-20
总结来说，Bootstrap Suggest JS提供了一种优雅的方式，利用Bootstrap的样式和JavaScript能力，构建出具有实时搜索和自动完成功能的下拉框。在实际开发中，可以根据需求自定义数据源、事件处理和样式，以适应各种...
Vue使用枚举类型实现HTML下拉框步骤详解
08-28
在 JS 文件中，我们创建了一个 `statusModel` 对象，用于存放下拉框的数据和选中结果。在 `statusModel` 对象中，我们定义了两个属性：`selectStatus` 和 `status`，其中 `selectStatus` 属性用于存放下拉框的选项...
纯js下拉框插件tastySelect
06-01
**纯JS下拉框插件TastySelect详解** 在网页设计中，下拉框（Select元素）是常见的交互元素，用于提供多个选项供用户选择。然而，原生的HTML Select在样式控制和交互效果上存在局限性。为了解决这个问题，开发者们...
js简单下拉菜单
12-16
js实现简单的下拉菜单
javascript中select下拉框的用法总结
11-24
本文针对开发项目中遇到的问题，进行了汇总 问题1：如何选择select的option里面的值？ 首先会用到一个方法 onchange（）；这个方法主要用于触发，选择框内容改变时间 实现代码： <!doctype html> <html> <head lang="en"> <meta charset="UTF-8"> </head> <body> <select onchange="test(event)"> <option>安静</option> <option>晴天</option> <option>七里香</option> </select> <script typ
Jtable设置单元格为下拉框
程序员yqy的博客
01-17 2976
public class TableProcessing extends JFrame implements TableModelListener { public TableProcessing() { super("Table"); String[] columnNames = {"Item", "Quantity", "Price", "Cos...
前端如何在table表格的表头上增加可点击的下拉框
qq_42177730的博客
08-11 1874
前端如何在table表格的表头上增加可点击的下拉框
js实现下拉框功能
wqy18378671261的博客
06-24 4577
body代码： <h3>请选择下拉框内容：</h3> 颜色： <select name="" id="proc"> <option value="">请选择水果颜色</option> </select> 水果： <select name="" id="city"> <option value="">请选择水果</option&gt.
使用js实现简单的下拉菜单
qq_52622178的博客
08-05 5589
全部代码如下，详细注释已在代码注释中。 <!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">
js的form.reder()函数渲染table表格中的下拉框数据
m0_61682705的博客
03-27 2894
目录 问题描述 form.reden()函数 简单介绍一下form.reden() layui官网对于渲染页面的介绍 页面渲染 问题描述 在我的项目中遇到一个问题在table中添加输入框但是下拉输入框中没有我们的数据 如图: 看代码 : function add(data) { data.forEach((item, index) => { let a = index + 1 $('.w100').append(
Js模拟下拉框（select-option）的实现
weixin_45535195的博客
08-31 6317
js模拟下拉框 今天想给大家分享一下之前自己做的一个js模拟下拉框，所有select-option中我能发现的操作，都在我的代码中将其实现。在本文最后会附上源码，希望对大家有所帮助。如果select中还有一些本人未实现的希望大家在评论区指出。话不多说，直入主题。 首先是布局，很多时候布局也会对js的实现造成影响，所以布局一定要写好 div id = "box"> <p>&l...
ui组件——多选下拉input的实现（带有搜索功能）
caoxun03的博客
07-13 6943
先上效果图 废话不说 先看div层次结构<!-- 最外层div 可以任意指定 主要用于定义子元素宽度 --> <div class="col-xs-10" style="width:800px"> <!-- 表单label 添加文字提示 --> <label for="" class="label-control">全文检索</label>
JavaScript核心技术详解
在JavaScript编程中，理解和掌握以下知识点至关重要： 1. 事件源对象: 当一个事件发生时，`event.srcElement` 可以获取到事件的触发对象，例如按钮或链接。通过 `event.srcElement.tagName` 和 `event.srcElement....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值