JQuery implements a simple example of the drop down box left and right selection
- 2020-03-30 02:07:41
- OfStack
And that's what it does, it says add to the right, add to the right, delete to the left, delete to the left.
HTML part:
<body>
<div class="centent">
<select multiple="multiple" id="select1" style="width:100px;height:160px;">
<option value="1"> options 1</option>
<option value="2"> options 2</option>
<option value="3"> options 3</option>
<option value="4"> options 4</option>
<option value="5"> options 5</option>
<option value="6"> options 6</option>
<option value="7"> options 7</option>
</select>
<div>
<span id="add" > Select add to the right >></span>
<span id="add_all" > Add them all to the right >></span>
</div>
</div>
<div class="centent">
<select multiple="multiple" id="select2" style="width: 100px;height:160px;">
<option value="8"> options 8</option>
</select>
<div>
<span id="remove"><< Select and delete to the left </span>
<span id="remove_all"><< Delete everything to the left </span>
</div>
</div>
</body>
Note that the multiple attribute of the select will only appear in the select box if multiple select options are added.
Otherwise only one will show up.
JQuery code resolution:
<script type="text/javascript">
$(function(){
//To the right
$('#add').click(function() {
//Gets the selected option, deletes it, and appends it to the other party
$('#select1 option:selected').appendTo('#select2');
});
//Move to the left
$('#remove').click(function() {
$('#select2 option:selected').appendTo('#select1');
});
// all To the right
$('#add_all').click(function() {
//Get all the options, delete and append to each other
$('#select1 option').appendTo('#select2');
});
// all Move to the left
$('#remove_all').click(function() {
$('#select2 option').appendTo('#select1');
});
//Double click on the options
$('#select1').dblclick(function(){ //Bind double click event
//Get all the options, delete and append to each other
$("option:selected",this).appendTo('#select2'); //Append to the other party
});
//Double click on the options
$('#select2').dblclick(function(){
$("option:selected",this).appendTo('#select1');
});
});
</script>
So notice here Is $(option: "selected", this). This one looks a little weird. In fact, $() has two parameters, one is the selector and one is the scope. To be distinguished from $(" XXXX, XXX "). The usual $(' XXXX ') is the default for the second scope. In full, it should be $(' XXXX ',document). When you add this here, the scope is limited to either #select1 or #select2. That is, the selected item in select1 is added after #select2.
The effect is similar to $("#select1 option:selected").
If you don't add the parameter "this", then you're going to get involved in the global selection. It's going to go wrong.
Note 2:
Append () versus appendTo().
Append (content|fn) appends content inside each matched element.
AppendTo (content) appends all matched elements to another specified collection of element elements.
The former adds content to the matched element, while the latter appends the matched element to another specified set of elements.
Such as $(" p "). Append (" < B> Hello< / b>" ); Is to append to the p element < B> Hello< / b> .
Original p element contents: < P> I would like to say: / p> Now the p element content: [< p> I order like to say: < b> Hello< / b> < / p>] $(" p "). AppendTo (" div "); Append the p element to the div element. Original content: < P> I would like to say: / p>
< Div> < / div> < Div> < / div> Results: < Div> < P> I would like to say: / p> < / div> < Div> < P> I would like to say: / p> < / div>