Two select of multiple add delete options and value instances

  • 2020-03-30 02:55:14
  • OfStack

I don't know how to describe it, but there are two select pull-downs, like a text field, where you can select a value from the result set on one side and add it to the other side; When you delete the other side, the value goes back to the result set. See the example directly, believe you before the latter will be used later!
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201451285835148.png? 201441285846 ">

Don't say more, on the code:


<!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 an id of car_type_val
  $("#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 man series ">2014 Forest man series </option>
  <option value="2014 Outback series ">2014 Outback series </option>
  <option value="2014 The liberty series ">2014 The liberty series </option>
  <option value="2014XV A series of ">2014XV A series of </option>
  <option value="WRX STI">WRX STI</option>
  <option value="SUBARU BRZ">SUBARU BRZ</option>
  <option value="TRIBECA">TRIBECA</option>
</select>
</body>
</html>

Where "< Input type="hidden" name="car_type" value="" id="car_type_val" />" This is the equivalent of a container where you can pass values when you submit a form. To the page that receives the value, use the appropriate language, such as PHP, to split it into an array with an "@" delimited function.


Related articles: