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>