在下拉框中动态添加不可用的项

最新推荐文章于 2020-08-31 16:34:26 发布

dshj

最新推荐文章于 2020-08-31 16:34:26 发布

阅读量1.1k

点赞数

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

本文链接：https://blog.csdn.net/dshj/article/details/1774205

版权

Javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<HTML>
<HEAD>
<TITLE></TITLE>
<style text="text/css">
optgroup { background-color:#eee; color:444; }
</style>
</HEAD>

<BODY>

   <br>
  <select id="sel1" name="sel1">
  <option value="">option1</option>
  <optgroup label="disable1"></optgroup>
  <option value="">option2</option>
  <option value="">option3</option>
  </select>

</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
function AddOption()
{
  var sel = document.getElementById("sel1");
  var opt = document.createElement("option");
  opt.innerText = "newopt";  //用insertAdjacentElement时必须设置该属性(设置该属性后不能用options.add添加,报错)
  opt.text = "optionX";   //设置这个属性用insertAdjacentElement方法会添加一个空白项,该属性可以不用
  opt.value = "X";

  sel.insertAdjacentElement("beforeEnd",opt);
  //sel.options.add(opt);   //用这个方法新加的项放到上一个optgroup下
}
function AddOptGroup()
{
  var sel = document.getElementById("sel1");
  var optg = document.createElement("optgroup");
  optg.label = "disableX";
  sel.appendChild(optg);
  //sel.add(optg);    //必须用appendChild方法,否则相同的optgroup只能添加一个
}

function ClearOptions(obj)
{
var sel = document.getElementById("sel1");

  var gl = sel.children.length - 1;
  for(var i=gl;i >= 0;i--)
  {
   sel.removeChild(sel.children(i)); //必须用removeChild方法删除,否则optgroup项删除不掉
  }
}
//-->
</SCRIPT>

dshj

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
在下拉框中动态添加不可用的项

optgroup { background-color:#eee; color:444; } option1 option2 option3 function AddOption() { var sel = document.getElementById("sel1"); var opt = docu
复制链接

扫一扫

专栏目录