JS 操作 Select相关功能测试
JS 操作 Select相关功能测试
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
font-size: 10px;
line-height: 24px;
}
</style>
</head>
<body>
//this is for the select test
<form id='myForm' action="submit" method="GET">
<input type="text" id="inputChange" />
<select name="selectFruits" id="mySelect">
<option value="Orange1">Orange</option>
<option value="Apple2">Apple</option>
<option value="Banana3">Banana</option>
</select>
<br>
<input type="button" value="disable">
<input type="button" value="Able">
<input type="button" value="getValues">
<input type="button" value="editValues">
<input type="button" value="addValues">
<input type="button" value="removeValues">
<br>
</form>
<p id="demoInput"></p>
<script>
function disableFunc() {
document.getElementById('mySelect').disabled = true
}
function ableFunc() {
document.getElementById('mySelect').disabled = false
}
function getValues() {
var text = '<ul>'
var x = document.getElementById('mySelect')
for (var i = 0; i < x.length; i++) {
text += '<li>' + x.text + '</li>'
}
text += '</ul>'
document.getElementById('demoInput').innerHTML = text
}
function editValue() {
var mySelected = document.getElementById('mySelect')
var selectedIndex = mySelected.selectedIndex
mySelected.text = document.getElementById('inputChange').value
}
function removeValue() {
var myselect = document.getElementById('mySelect')
var selectedIndex = myselect.selectedIndex
myselect.remove(selectedIndex)
}
function addValue() {
var myselect = document.getElementById('mySelect')
var addvalue = document.getElementById('inputChange').value
myselect.options.add(new Option(addvalue,"value"))
}
</script>
</body>
</html>
页:
[1]