ソースコード

<script type="text/javascript">
var options = {
		cssClass: "target_item",
		keepOrder: true,
		selectableHeader: "<div class='header_item'>商品候補</div>",
		selectionHeader: "<div class='header_item'>対象商品</div>",
		afterSelect: function(values){
			console.log( values )
			console.log( $( "#select_item").children( "option[value='"+values+"']" ).text() )
		},
		afterDeselect: function(values){
			console.log( values )
			console.log( $( "#select_item").children( "option[value='"+values+"']" ).text() )
		}
}

$(function(){
	$('#select_item').multiSelect(options)

	$('#select_item2').multiSelect({
		keepOrder: true,
		selectableHeader: "<div class='header_item'>商品候補</div>",
		selectionHeader: "<div class='header_item'>対象商品</div>"
	})

	// ************************
	// CSS の切り替え
	// ************************
	$('#change_css').click(function(){
		var item1 = $("#select_item").data().multiselect.options.cssClass;
		if ( item1 == "target_item" ) {
			$("#select_item").data().multiselect.options.cssClass = "";	
			$("#select_item2").data().multiselect.options.cssClass = "target_item";
		}
		else {
			$("#select_item").data().multiselect.options.cssClass = "target_item";	
			$("#select_item2").data().multiselect.options.cssClass = "";
		}
		$('#select_item').multiSelect("refresh");
		$('#select_item2').multiSelect("refresh");
	});

});
</script>
<style>
.header_item {
	padding: 5px;
	text-align: center;
	border: solid 1px #ccc;
	margin-bottom:2px;
	background-color: #eee;
}
.target_item {
	width: 600px;
}
.target_item .ms-selectable li.ms-elem-selectable, .select_item .ms-selection li.ms-elem-selection {
	padding: 10px;;
}
.target_item ul.ms-list{
  height: 300px;
}
/* 左右入れ替え */
.target_item .ms-selectable {
	float: right;
}
.target_item .ms-selection {
	float: left;
}

</style>

<input
	type="image"
	id="change_css"
	src="../image/change_css.png"
	style='margin-bottom:20px;box-shadow: 0 25px 10px -20px rgba(0, 0, 0, 0.5)'>
<br>
<form
	method="get"
	id="target_form"
	target="my_ferame"
	action="http://winofsql.jp/php_get.php"
	accept-charset="utf-8">

	<input
		type="submit"
		name="send"
		id="send_check"
		value="送信">


	<select 
		multiple
		id="select_item"
		name="select_item[]">

		<option value='0001'>りんご</option>
		<option value='0002'>トマト</option>
		<option value='0003'>いくら</option>
		<option value='0004'>醤油</option>
		<option value='0005'>鳥唐揚</option>
		<option value='0006'>みりん</option>
		<option value='0007'>さんま</option>
		<option value='0008'>海苔</option>
		<option value='0009'>おにぎり</option>
		<option value='0010'>コロッケ</option>

	</select>
	<br><br>
	<select 
		multiple
		id="select_item2"
		name="select_item2[]">

		<option value='0001'>りんご</option>
		<option value='0002'>トマト</option>
		<option value='0003'>いくら</option>
		<option value='0004'>醤油</option>
		<option value='0005'>鳥唐揚</option>
		<option value='0006'>みりん</option>
		<option value='0007'>さんま</option>
		<option value='0008'>海苔</option>
		<option value='0009'>おにぎり</option>
		<option value='0010'>コロッケ</option>

	</select>

</form>
<br>
<iframe
	name="my_ferame"
	frameborder="1"
	scrolling="yes"
	width="600"
	height="200"></iframe>