Today brings the transfer of drop-down list items implemented by js. There are two special points to note. One is the transfer of parameters when calling a function in a button, and the other is whether the name of the form object can be passed as a parameter.
First of all, I will give the code: (directly copying can test the effect)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Text transfer of drop-down box</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.wide {
width: 400px;
margin: 0 auto;
}
.selcetwords {
width: 100px;
}
</style>
<script type="text/javascript">
function moveWords(oldwords,newwords) {
var words = new Array();//Array to hold words
//value used to get the selected word
var temp = 0;//Used to save the number of selected words
//Save selected words
for(var i = 0; i < document.getElementById(oldwords).options.length; i++) {
//Judge whether to select
if (document.getElementById(oldwords).options[i].selected) {
//Save selected words
words[temp] = document.getElementById(oldwords).options[i].value;
//Increase the length of the word to save
temp ++;
}
}
//Delete words that have been selected for saving
for (var i = 0;i < words.length;i++) {
for(var j = 0; j < document.getElementById(oldwords).options.length; j++){
if (words[i] == document.getElementById(oldwords).options[j].value) {
document.getElementById(oldwords).options[j].remove();
}
}
}
//Assign to destination list
for (var i = 0;i < words.length;i++) {
newOption = new Option(words[i],words[i]);
//Add list item
document.getElementById(newwords).options.add(newOption);
}
}
</script>
</head>
<body>
<div class="wide">
<form action="#" method="post" name="myform">
<select size="10" name="leftwords" id="leftwords" class="selcetwords" multiple="multiple">
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
<option value="ddd">ddd</option>
</select>
<input type="button" name="" id="" value="Right shift" onclick="moveWords('leftwords','rightwords')"/>
<input type="button" name="" id="" value="Left shift" onclick="moveWords('rightwords','leftwords')"/>
<select size="10" name="rightwords" id="rightwords" class="selcetwords" multiple="multiple">
<option value="xxx">xxx</option>
<option value="yyy">yyy</option>
<option value="zzz">zzz</option>
</select>
</form>
</div>
</body>
</html>Let me answer the following two questions:
The first one: you can use single quotes for your own named parameters. Otherwise, it will be treated as an unnamed variable, and it is not allowed to add double quotes
Second: in the form button, the parameters passed by the function should be the parameters and values of the form. Of course, it's OK to pass name, which is equivalent to passing custom parameters, but now it's generally using id. when using id, it's OK to use it without double quotes.