【Java Web基础】(五)实现新增下拉列表—由用户输入内容(Html+JS)

Html文件中的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>尝试一下</title>
<script type="text/javascript" src="MyJS.js" charset="UTF-8"></script>
</head>
<body><form name="myForm" action=""><select name="cities" onchange="gg()"><option value="DaLian">大连</option><option value="BeiJing">北京</option><option value="ShangHai">上海</option><option value="GuangZhou">广州</option></select><input type="button" value="点击增加选项" onclick="add()"/></form>
</body>
</html>

MyJS.js文件中的代码：

document.write('<script src="ChinesePY.js"><\/script>'); //引入当前目录下的ChinesePY.js文件。
function add()
{var opObject=document.myForm.cities;opObject.length++;var x=prompt("请输入你所在的城市");var Py=Pinyin.GetQP(x);opObject.options[opObject.length-1]=new Option(x,Py);
}
function gg()
{var opObject=document.myForm.cities;for(var i=0;i<opObject.length;i++){if(opObject.options[i].selected){alert(opObject.options[i].value);alert(opObject.options[i].text);}}
}

实现效果：
1、运行界面效果

2、点击按钮后弹出输入框，输入后单击确定

3、可以在下拉列表中看到新添加的内容
4、导入了ChinesePY脚本，所以可以将用户输入内容转换为拼音，效果如下：

需要ChinesePY这个拼音转换包的话，我可以发

【Java Web基础】(五)实现新增下拉列表—由用户输入内容(Html+JS)相关推荐

Java Web基础
目录 Java Web基础 HTML基础 HTML补充 CSS基础 CSS补充 JavaScript基础 JavaScript补充(例题) Java Web补充 Java Web基础 HTML基础标 ...
Java Web基础面试问题——Cookie和Session
Java Web基础面试问题 Cookie 和 Session 的区别什么是HTTP 超文本传输协议,是一种用于分布式.协作式和超媒体信息系统的应用层协议. 设计HTTP最初的目的是为了提供一种发布 ...
Java web基础学习笔记
1.xml概述 1.1xml:xml一种数据存储格式,这种数据存储格式在存储数据内容的同时,还能够保存数据之间的关系 1.2xml保存数据的方法:xml利用标签来保存数据的内容,利用标签之间的嵌套关系 ...
Java Web基础概述
文章目录一. JavaWeb基本概念 1. 前言 2. web应用程序 3. 静态web 4. 动态web 二. Web结构 1. 什么是后端开发 2. 后端和前端的区别二. Web开发模式 1. ...
【转】Java学习---Java Web基础面试题整理
[原文]https://www.toutiao.com/i6592359948632457731/ 1.什么是Servlet? 可以从两个方面去看Servlet: a.API:有一个接口servlet ...
Java web 基础
以 GET /static/ 为开头:表示静态资源一个页面请求时,该页面会有许多静态页面组成,会在服务器端产生对应的日志信息.我们在进行日志分析时,显然要将这部分内容过滤掉. 1. HTTP.GET ...
Java Web基础知识之安全：人生苦短，注意安全
关于web程序中的安全方面,想必大多数人都不甚了解,或者说感觉没有必要了解,身边开发网站的人主要就是注重后台的功能和前台的界面,不要说程序的安全问题,甚至后台数据库访问的问题可能都没有下大力气解决.但 ...
Java Web基础入门第八讲 Java Web开发入门——初始WEB服务器
WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源.Internet上供外界访问的Web资源分为: 静态web资源(如html页面):指we ...
【Java Web基础】（十一）Ajax示例：根据用户输入的学号填充用户信息
本例完成的任务:用户输入完学号时触发Ajax异步请求,从服务器获取学号所对应学生信息,并对页面中相应的学生信息进行更新填充. 输入信息的JSP界面: <%@ page contentType=& ...

【Java Web基础】(五)实现新增下拉列表—由用户输入内容(Html+JS)

【Java Web基础】(五)实现新增下拉列表—由用户输入内容(Html+JS)相关推荐

最新文章

热门文章