【Java Web基礎】(五)實現新增下拉選單—由使用者輸入內容(Html+JS)

passer__jw767發表於2020-10-07
JavaWebHTMLJS

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、可以在下拉選單中看到新新增的內容
在這裡插入圖片描述

相關文章