jquery メニュー ui で選択した ui.item の name 属性を取得しようとしています。「選択された」クラスが追加されたアイテムの name 属性が必要ですが、attr('name') は未定義を返します。送信ボタンがクリックされたときに、その name 属性を取得する必要があります。
<script>
$(function () {
var selection = ' ';
$(".menu").menu({
select: function (event, ui) {
$('.selected', this).removeClass('selected');
selection = ui.item.addClass('selected').attr('name');
} // closes select function
}); // closes menu
$("button").button();
$("button").click(function () {
alert(selection)
}); //closes click()
});
</script>
<ul class="menu" id="menu">
<li>
<a href="#" name="academic_artStudies">
<img src="" alt="" />
<h2>Academic: Art Studies</h2>
</a>
</li>
<li>
<a href="#" name="academic_Literature">
<img src="" alt="" />
<h2>Academic: Literature</h2>
</a>
</li>
<li>
<a href="#" name="academic_socialSciences">
<img src="" alt="" />
<h2>Academic: Social Sciences</h2>
</a>
</li>
<li>
<a href="#" name="academic_physicalNaturalSci">
<img src="" alt="" />
<h2>Academic: Physical/Natural Sciences</h2>
</a>
</li>
</ul>