選択されているリストボックスの値をjQueryを使って得る方法

選択されているリストボックスの値をjQueryを使って得るには、select要素に対してval()メソッドを実行することで得ることができる。
次のソースコードで試してみた。

<script type="text/javascript">
$(function(){
  $('option').prop('selected',false); 
  $('input[value="チェック"]').click(function(){
    var result = '結果 ';
    var list = $('select[name="food"]').val();
    if(list){
      for(var i=0; i<list.length ; i++){
        result += list[i];
      }
    }else{
      result += '選択されていません';
    }
    $('#result').text(result);
  });

  $('input[value="解除"]').click(function(){
    $('option').prop('selected',false);
  });
});
</script>
</HEAD>
<BODY>
<h2>val()によるselect multipleで複数選択された値を取得</h2>
<form class="check">
<input type="button" value="チェック">
<input type="button" value="解除">
</form>
<form class="box">
<select name="food" size="3" multiple>
  <option value="りんご">りんご</option>
  <option value="いちご">いちご</option>
  <option value="ぶどう">ぶどう</option>
</select>
</form>
<p id="result"></p>

サンプル