Try this: http://shaquin.tk/experiments/select-ajax2.html.
HTML:
Please select an article to view.
JS:
var origText = '';
$(document).ready(function() {
origText = $('#article').text();
$('select').on('change', changed);
});
function changed(e) {
$('#article').html('Loading...');
$('#article').load('content.php', $.param({0: e.target.value, 1: origText}));
}
PHP:
$_GET[1],
'feature' => 'Feature article goes here',
'current' => 'Lorem ipsum dolor sit amet, denique laetare ... se est Apollonius.
',
'research' => 'You selected research',
'archive' => 'Archives',
'video' => 'Video
',
'story' => 'Submit a story',
'event' => 'Submit an event'
);
$article = $articles[$selected];
echo $article;
?>
CSS (optional):
body {
background: #ccc;
text-align: center
}
#article {
padding: 30px;
margin: 20px;
text-align: left;
background: #eee;
text-shadow: 1px 1px #fff;
text-shadow: 0 0 3px #fff;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
.loading {
text-transform: uppercase;
font-size: 15pt;
text-shadow: 1px 1px #f00, 1px 2px #f00, 2px 2px #f00, 3px 3px #f00;
}
In the PHP, you would probably want to fetch the text from a database: PHP - MySQLi.
