<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859">
<title>jQuery WebApp</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form action="post" method="">
<select id="Option">
<option class="renault">Zoé</option>
<option class="renault">Twizy</option>
<option class="renault">Megane</option>
<option class="vw">Up!</option>
<option class="vw">Golf</option>
<option class="audi">A8</option>
</select>
<input type='button' id="load" value='load'>
</form>
<script>
$.fn.changeToHidden = function () {
this.each(function(i, Element) {
var $Element = $(Element),
$new = $('<input type="hidden">').attr('rel', $Element.html())
.attr('value', $Element.attr('value'))
.attr('class', $Element.attr('class'));
$Element.parent().append($new);
$Element.remove();
});
};
$.fn.changeToOption = function () {
this.each(function(i, Element) {
var $Element = $(Element),
$new = $('<option>').html($Element.attr('rel'))
.attr('value', $Element.attr('value'))
.attr('class', $Element.attr('class'));
$Element.parent().append($new);
$Element.remove();
});
};
$("#load").click(function() {
var org = $(this).val();
$("#Option option").changeToHidden();
$('#Option input[type="hidden"].renault').changeToOption();
});
$(document).ready(function(){
$("#btn1").click(function(){
$("#Option").load("Option.html #Second");
});
});
</script>
<p>
</p><input type='button' value='load' id='btn1'>
</body>
</html>
