selectbox ...

어려운 녀석이다.


<select id="step" name="step" size="6"  style="width: 100%"></select>

이런식으로 주로 사용하지...
여기서
size는 높이 같음

$J.each(result, function(i,result){
    var val = result.range_a + ' ~ ' + result.range_b + '(' + result.color + ')' ;
    $J('#step').append($J("<option/>", { value: i, text: val}));
    });

ajax 로 불러온 값을 넣으려면 append를 쓰면 된다.


그리고 특정 index 의 값을 바꾸려면,
$J('#step').replaceWith($J("<option/>", { value: selectedData, text: text1}));

해서 replaceWith를 사용하면 된다.



그리고 item의 갯수를 알아오는 것은,

var size = $J("#selectColumnDataList option").size() ;

size를 사용하면 되고,


값을 전체 다 넘기려면

$J('#selectColumnDataList').attr('multiple','multiple');

이렇게 해 준 뒤 ,
for(var i=0; i < size ;i++){
var str = '#selectColumnDataList option:eq(' + i + ')';
$J(str).attr('selected', 'true') ;
}

for 문을 써서 selected를 true로 바꿔주면 된다.

var val = $J("#selectColumnDataList  option:selected").val();
var name = $J("#selectColumnDataList  option:selected").text();
var index = $J("#selectColumnDataList option").index($J("#selectColumnDataList option:selected"));



* optgroup 라는 태그가 있다.
이 녀석은 선택 옵션을 묶을 때 사용하는 태그다.


<select>
<optgroup label="A">
<option>a</option>
<option>b</option>
<option>c</option>
</optgourp>
<optgroup label="B">
<option>d</option>
<option>e</option>
</optgourp>
</select>