JS向下拉框添加内容

最新推荐文章于 2024-02-09 17:33:18 发布

nmgfire007

最新推荐文章于 2024-02-09 17:33:18 发布

阅读量6.7k

点赞数

分类专栏： javascript 文章标签： input button function list html 360

本文链接：https://blog.youkuaiyun.com/nmgfire007/article/details/2221598

版权

javascript 专栏收录该内容

4 篇文章

订阅专栏

1.在一个页面上添加

add

<html>

<head>dialog</head>
<script>
function addOption(){
  var item = document.getElementById("item").value;
  var itemV = document.getElementById("itemV").value;
  var list = document.getElementById("list");
  list.options.length = list.options.length+1;
  var option = new Option(item,itemV,false,true);
  list.options[list.options.length-1]= option;
  alert("ok");
}
</script>
<body>
<select name="list" id="list"
      style="width:240px" size="5">
    </select>
   item:<input type="text" name="item" id="item"/>
   value:<input type="text" name="itemV" id="itemV"/>
  <input type="button" name="add" id="id" value="add" onClick="addOption();"/>
</body>
</html>

2.通过子窗口向父窗口添加

parent.html:

<html>
<head>add opt</head>
<script>

function openWin()
{
window.open("dialog.html",'','width=500px, height=360px,left='+(screen.width/2-300)+'px,top='+(screen.height/2-175)+'px,unadorned=off,scrollbars=yes,resizable=yes,status=no');
}
</script>
<body>
  <select name="condition" id="condition"
      style="width:240px" size="5">
    </select>
   item:<input type="text" name="item" id="item"/>
   value:<input type="text" name="itemV" id="itemV"/>
  <input type="button" name="add" id="id" value="add" onClick="openWin();"/>
</body>
</html>

children.html

<html>

<head>dialog</head>
<script>
function addOption(){
  var item = document.getElementById("item").value;
  var itemV = document.getElementById("itemV").value;
  var condition = window.opener.document.getElementById("condition");
   var newOpt = window.opener.document.createElement("option");//需要调用父窗口的方法来创建option对象，因为只允许窗体访问自己的变量对象。
  newOpt.text=item;
  newOpt.value=itemV;
  condition.options.add(newOpt);
  alert("ok");
}
</script>
<body>
item:<input type="text" name="item" id="item"/>
   value:<input type="text" name="itemV" id="itemV"/>
  <input type="button" name="add" id="id" value="add" onClick="addOption();"/>
</body>
</html>