A simple example of jQuery implementing left and right selection in drop-down box_jquery

To achieve this effect, select and add to the right, add all to the right, select and delete to the left, and delete all to the left.

html part:

Copy code The code is as follows:

 

  

                                                                                    < "6">Option 6
    Add all to the right>>



 

  

    Option 8
/span>
                                                                                 < /body>

What should be noted here is the multiple attribute of select. Only after adding it, multiple select options will appear in the select box.
Otherwise only one will be displayed.

jQuery code analysis:




Copy code

The code is as follows:

Note here that is $("option:selected",this). This one looks a little strange. In fact, $() has two parameters, one is the selector and the other is the scope. It must be distinguished from $("xxxx,xxx"). In the usual sense, $('xxxx') actually defaults to the second scope. To be complete, it should be $('xxxx',document). After adding this here, the scope is limited to #select1 or #select2. That is, the selected items in select1 are added to the back of #select2.

The effect is similar to $("#select1 option:selected").

If you do not add the this parameter, it will involve the globally selected item. Something will go wrong.

Note 2:

The difference between append() and appendTo() methods.

append(content|fn) appends content to each matching element.

appendTo(content) appends all matching elements to another specified element set.

The former adds content to the matching elements, and the latter appends the matching existing elements to another specified element collection.

For example, $("p").append("Hello"); appends the content Hello to the p element.

Original p element content:

I would like to say:

Current p element content: [

I would like to say: Hello< /b>

]$("p").appendTo("div");Append the p element to the div element. Original content:

I would like to say:

Result:

I would like to say:

I would like to say:

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn