如何同时应用add()和remove()方法?

时间:2014-12-31 01:54:55

标签: javascript php asp.net dreamweaver

我要求2个下拉列表名称为Parent n child。 我已经通过子项创建了一个隐藏字段,仅在单击父值时显示。

我试图同时应用添加和删除方法。 以下是来自w3schools的相应add()和remove()方法的示例。

如何将它们整合在一起?

// Add()方法

<!DOCTYPE html>
<html>
<body>

<form>
  <select id="mySelect" size="8">
    <option>Apple</option>
    <option>Pear</option>
    <option>Banana</option>
    <option>Orange</option>
  </select>
</form>
<br>

<p>Click the button to add a "Kiwi" option at the end of the dropdown list.</p>

<button type="button" onclick="myFunction()">Insert option</button>

<script>
function myFunction() {
    var x = document.getElementById("mySelect");
    var option = document.createElement("option");
    option.text = "Kiwi";
    x.add(option);
}
</script>

</body>
</html>

//remove() method
<!DOCTYPE html>
<html>
<body>

<form>
Select a fruit:
<br>
<select id="mySelect" size="4">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>
</form>
<br>

<button onclick="myFunction()">Remove selected fruit</button>

<script>
function myFunction() {
    var x = document.getElementById("mySelect");
    x.remove(x.selectedIndex);
}
</script>

</body>
</html>

以下是测试代码的网站:

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_select_add

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_select_remove

1 个答案:

答案 0 :(得分:0)

<!DOCTYPE html>
<html>
<body>

<form>
  <select id="mySelect" size="8">
    <option>Apple</option>
    <option>Pear</option>
    <option>Banana</option>
    <option>Orange</option>
  </select>
</form>
<br>

<p>Click the button to add a "Kiwi" option at the end of the dropdown list.</p>

<button type="button" onclick="add()">Insert option</button>
<button onclick="rem()">Remove selected fruit</button>

<script>
function add() {
    var x = document.getElementById("mySelect");
    var option = document.createElement("option");
    option.text = "Kiwi";
    x.add(option);
}

function rem() {
    var x = document.getElementById("mySelect");
    x.remove(x.selectedIndex);
}
</script>

</body>
</html>