javascript select work

最新推荐文章于 2025-08-15 22:56:20 发布

原创最新推荐文章于 2025-08-15 22:56:20 发布 · 594 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #standards #button #function #insert #input

本文介绍了一种使用JavaScript来操作HTML中的Select元素的方法，包括在选定项前插入选项、移除选定选项、在末尾追加选项及移除最后一个选项等功能，并提供了具体的实现代码。

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

样式：（本页中操作不起作用，只为原型，其脚与html请看示例下一个）

Insert Before Selected
Remove Selected
Append5Append6Append7Append8Append10Append11Append12Append13Append14Append15
Append Last
Remove Last

The JavaScript
<script language="JavaScript" type="text/javascript">
var count1 = 0;
var count2 = 0;
function insertOptionBefore(num)
{
    var diabloselect = document.getElementById('selectX');
if (diabloselect.selectedIndex >= 0)
{
        var selectoption = document.createElement('option');
  selectoption.text = 'Insert' + num;
  selectoption.value = 'insert' + num;
  var currentoption = diabloselect.options[diabloselect.selectedIndex]; //current index
  try
  {
      diabloselect.add(selectoption, currentoption); // standards compliant; doesn't work in IE
  }
  catch(ex)
  {
      diabloselect.add(selectoption, diabloselect.selectedIndex); // IE only
  }
}
}
function removeOptionSelected()
{
    var diabloselect = document.getElementById('selectX');
var i;
for (i = diabloselect.length - 1; i>=0; i--)
{
     if (diabloselect.options[i].selected)
  {
      diabloselect.remove(i);
  }
}
}
function appendOptionLast(num)
{
    var selectoption = document.createElement('option');
selectoption.text = 'Append' + num;
selectoption.value = 'append' + num;
var diabloselect = document.getElementById('selectX');
try
{
     diabloselect.add(selectoption, null); // standards compliant; doesn't work in IE
}
catch(ex)
{
     diabloselect.add(selectoption); // IE only
}
}
function removeOptionLast()
{
    var diabloselect = document.getElementById('selectX');
if (diabloselect.length > 0)
{
     diabloselect.remove(diabloselect.length - 1);
}
}
</script>

The HTML
<form>
<input type="button" value="o" onclick="insertOptionBefore(count1++);" />Insert Before Selected<br />
<input type="button" value="o" onclick="removeOptionSelected();" />Remove Selected<br />
<select id="selectX" size="10" multiple="multiple">
<option value="original1" selected="selected">Orig1</option>
<option value="original2">Orig2</option></select><br />
<input type="button" value="o" onclick="appendOptionLast(count2++);" />Append Last<br />
<input type="button" value="o" onclick="removeOptionLast();" />Remove Last
</form>