SelectBox default option selected－Jemmy Walker

　　想在下拉選單初始化時，預設選擇一個Option，蠻簡單的：$('#selectBoxID').val('Taiwan')。val帶的參數是<option>的value屬性，而非標籤裡的資料。

　　第二種情形是，想預設第一筆被選，而不會事先知道value。有兩種作法：

$('#selectBoxID').val($('#selectBoxID option:first'));
$('#selectBoxID option:first').attr('selected', 'selected');

　　jQuery還有兩個plugin強化SelectBox。一個可以把SelectBox當作DOM方式操作，如下：

// import jquery.selectboxes.min.js

$('#selectBoxID').empty();       // clear option
$.each(data, function(i) {       // data is a JSON
    $('#selectBoxID').addOption( // add a option
            data[i].id,          // option value
            data[i].itemname);   // option display
});

　　另一個plugin是很常用的，兩個Select Box彼此Move的動作。通常有>>、>、<、<<的按鈕，片段如下：

// import jquery.multiselects-0.3.pack、jquery.multiselects-0.3.js

$(function() {
    // (OPTIONAL) adjust the width of the select box to the bigger of the two
    $("select[name='available']").selectAdjustWidth("select[name='selected']");
    $("select[name='available']").multiSelect("select[name='selected']", {
        trigger: "input[name='remove']",
        triggerAll: "input[name='removeAll']"
        });
    $("select[name='selected']").multiSelect("select[name='available']", {
        trigger: "input[name='add']",
        triggerAll: "input[name='addAll']"
        });
});

　　感謝一位建教生慧潔幫忙做這樣的效果，下圖左的Select Box名為available，圖右名為selected，對照上面程式碼很容易懂。