客製化下拉選單取值

最近在看這篇
http://blog.rx836.tw/blog/jquery-drop-down-lists/
用jQuery客製化下拉式選單
來將我們的下拉式選單作美化與動畫

但是該怎麼取值呢


我們可以看到
在jquery.dropdown.js裡面已經把html結構給替換掉了

原本的code:
<select id="cd-dropdown" class="cd-select">
    <option value="-1" selected>請選擇一種動物</option>
    <option value="1" class="icon-monkey">猴子</option>
    <option value="2" class="icon-bear">熊</option>
    <option value="3" class="icon-squirrel">松鼠</option>
    <option value="4" class="icon-elephant">大象</option>
</select>

替換後的code:
<div class="cd-dropdown">
    <span>請選擇一種動物</span>
    <input type="hidden" name="cd-dropdown" value="">
    <ul>
        <li data-value="1"><span class="icon-monkey">猴子</span></li>
        <li data-value="2"><span class="icon-bear">熊</span></li>
        <li data-value="3"><span class="icon-squirrel">松鼠</span></li>
        <li data-value="4"><span class="icon-elephant">大象</span></li>
    </ul>
</div>

所以我們就沒有辦法用一般的id取值
不管用DOM
var test = document.getElementById("cd-dropdown");
var testval = test.value;
或是jQuery
var test = $("#cd-dropdown option:selected").val();

解法是
使用jQuey直接取得標籤input裡面的value
var $testgetinput = $("input");
var testgetvalue = $testgetinput.val();