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

    科技2024-06-03  74

    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这个拼音转换包的话,我可以发

    Processed: 0.013, SQL: 8