往下拉框中动态添加选项

最新推荐文章于 2022-08-12 10:39:17 发布

JAVAZHICHIZHE

最新推荐文章于 2022-08-12 10:39:17 发布

阅读量4k

点赞数

CC 4.0 BY-SA版权

文章标签： input button function javascript 数据库 html

本文链接：https://blog.youkuaiyun.com/JAVAZHICHIZHE/article/details/6468159

本文介绍了一种在不刷新页面的情况下动态添加下拉列表选项的方法，并提供了JavaScript实现示例。该方法适用于需要频繁更新商品种类等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我最近在做一个网站系统的后台，其中要涉及到添加商品种类的问题。由于添加的种类大多是已经存在的，所以不要每次手动的输入商品种类，但是同时又得保证其扩展性（添加新种类）因此我想到了现在正在使用的优快云学生大本营的添加笔记分类功能。

手动在页面添加值到下拉列表而不刷新的demo

在一个页面中有一个"添加"按钮和一个下拉列表，在单击"添加"按钮后,便在下拉列表中增加相应的选项,不用刷新页面就能看到列表的更新情况。然后当在弹出的新增框中添加“确定”时将新种类插入数据库

    <html>
<head>
<title>添加Option对象</title>
<script language = "javascript">
// 添加选项
function addOption(pos){
var objSelect = document.myForm.mySelect;
// 取得字段值
var strName = document.myForm.myOptionName.value;
var strvalue = document.myForm.myOptionvalue.value;
// 建立Option对象
var objOption = new Option(strName,strvalue);
if (pos == -1 & pos > objSelect.options.length)
objSelect.options[objSelect.options.length] = objOption;
else
objSelect.add(objOption, pos);
}

</script>
</head>
<body>

<hr>
<form name = "myForm">
<select name = "mySelect">
<option value = "第一名" Selected>中国</option>
<option value = "第二名">日本</option>
<option value = "第三名">美国</option>
<option value = "第四名">英国</option>
</select>
<br>

选项名称 : <input type = "text" name = "myOptionName" value = "英国"><br>
选项的值 : <input type = "text" name = "myOptionvalue" value = "第四名">
<input type = "button" onclick = "addOption(-1)" value = "添加">

</form>
</body>
</html>

在下次再调用此页面时从数据库中读出此下拉框中的内容。

——————————————更好的例子————————————

<html>

<head>

<title></title>
<script type="text/javascript">
function add(){
var selObj=document.getElementById("sel");
var valObj=document.getElementById("val");
var texObj=document.getElementById("tex");

//关键是这几句
var Option=document.createElement("OPTION");
Option.value=valObj.value;
Option.text=texObj.value;

selObj.options.add(Option);
}

</script>
</head>

<br>
value:<input type="text" id="val">
<br>
text:<input type="text" id="tex">
<br><br>

</html>