SoFunction
Updated on 2025-03-04

Two multiple-choice selects (multiple or so) add, delete options and value instances


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>select</title>
<script type="text/javascript" src=""></script>
<script>
$(function(){
 $("#car_type_list").dblclick(function(){
  var s_val = ;
  if(s_val == '') return;
  $(this).children("option[value='"+s_val+"']").remove();
  $("#car_type").append('<option value="'+s_val+'">'+s_val+'</option>');
//The following code is to back up the selected value to an input with id car_type_val, and 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 = ;
  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="" /><br/>
<select multiple="multiple" style="min-width:200px; min-height:80px;" >
</select><>
<select multiple="multiple" style="min-width:200px; min-height:80px;" >
<option value="2014 Forest Man Series">2014 Forest Man Series</option>
<option value="2014 Outback Series">2014 Outback Series</option>
<option value="2014 Legacy Series">2014 Legacy 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>