Home > Developer > JavaScript
I don't know how to describe it. There are two select drop-down lists, which are made into text fields. You can select values from the result set on one side and add them to the other side. After the other side is deleted, the value is returned to the result set again. Let's look at the demo. I believe you will use it later!
Let's just move on to the Code:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> select </title>
<Script type = "text/javascript" src = "jquery. min. js"> </script>
<Script>
$ (Function (){
$ ("# Car_type_list"). dblclick (function (){
Var s_val = this. value;
If (s_val = '') return;
$ (This). children ("option [value = '" + s_val + "']"). remove ();
$ ("# Car_type"). append ('<option value = "' + s_val + '">' + s_val + '</option> ');
// The following code backs up the selected value to an input with id car_type_val. You can pass the value
$ ("# Car_type_val"). val ($ ("# car_type_val"). val () + s_val + "@");
Alert ($ ("# car_type_val"). val ())
});
$ ("# Car_type"). dblclick (function (){
Var s_val = this. value;
If (s_val = '') return;
$ (This). children ("option [value = '" + s_val + "']"). remove ();
$ ("# Car_type_list"). append ('<option value = "' + s_val + '">' + s_val + '</option> ');
Var now_val = $ ("# car_type_val"). val ();
Now_val = now_val.replace (s_val + "@","");
$ ("# Car_type_val"). val (now_val );
Alert ($ ("# car_type_val"). val ())
});
})
</Script>
</Head>
<Body>
<Input type = "hidden" name = "car_type" value = "" id = "car_type_val"/> <br/>
<Select multiple = "multiple" style = "min-width: 200px; min-height: 80px;" id = "car_type">
</Select> <>
<Select multiple = "multiple" style = "min-width: 200px; min-height: 80px;" id = "car_type_list">
<Option value = "2014 forest series"> 2014 forest series </option>
<Option value = "2014 AO Hu series"> 2014 AO Hu series </option>
<Option value = "2014 lion series"> 2014 lion series </option>
<Option value = "2014XV series"> 2014XV series </option>
<Option value = "wrx sti"> wrx sti </option>
<Option value = "subaru brz"> subaru brz </option>
<Option value = "TRIBECA"> TRIBECA </option>
</Select>
</Body>
</Html>
"<Input type =" hidden "name =" car_type "value =" "id =" car_type_val "/>" is equivalent to a container, you can pass a value when submitting a form. To the page that receives the value, use the corresponding language, such as php, and use the explode function to split it into an array.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
