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

最新推荐文章于 2024-02-09 18:03:37 发布

passer__jw767

最新推荐文章于 2024-02-09 18:03:37 发布

阅读量2.5k

点赞数 1

分类专栏： Java Web基础

本文链接：https://blog.csdn.net/passer__jw767/article/details/108950567

版权

HTML JavaScript 拼音转换动态添加用户输入

关键词由CSDN通过智能技术生成

Java Web基础专栏收录该内容

25 篇文章 5 订阅

订阅专栏

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);
        }
    }
}