【オリジナル】セレクトボックスの問題

2768 ワード

selectにはいろいろな問題があります.まとめて3つに分けます.
一.表示:
たとえば:

<select size="4" name="fruit" id="fruit" multiple="multiple">
  <option value="">  </option> 
  <option value="1">  </option> 
  <option value="2"> </option> 
  <option value="3">  </option> 
  <option value="4">  </option> 
  <option value="5">  </option> 
</select>
selectタグにmultiple属性表示があり、複数選択ではなく単一選択で、そのままこの属性を削除すると、style="width:xx;height:xx;"によってselectのサイズをコントロールできます.
二.選択:
まず変数を定義します.
var selectObj = document.getElementById('fruit');
1.オプションがない場合
selectObj.options[0]==null
2.オプションがある場合            
選択されていません
selectObj.options.selectedIndex<0
                                          
選択(top)   
selectOjb.options.selectedIndex==0
選択    中(bottom)
selectOjb.options.selectedIndex==selectOjb.options.length-1
三.値を伝え、値を取る:(formを提出した後)
単一の値:バックグラウンドは直接request.get Parameeter(「fuit」)で入手できます.
複数選択の値:
考え方:
1隠しドメインID='hiddenFuitを定義します.
2つのJS方法でselectボックスの各オプションの値をパス例で取得します.隠し領域に入れて「&」で分けます.
3.バックグランドはrequest.get Parameeter(「hiddenFuit」)によってString列を得て、Stering.split(「&」)を通して一つのString配列を得て、各要素を得て、selectボックスの各オプションの値です.
コードセグメント:

<form id='fruitForm' action='' method=''>
   <input type="hidden" id="fruitValue" value="">
   <input type="hidden" id="fruitText" value="">
</form>
<script> 
<!--  
function save() {
    var selectObj = document.getElementById('fruit');
    var ValObj = document.getElementById('fruitValue');
    var TextObj = document.getElementById('fruitText'); 
    for(var i=0; i<selectObj.options.length; i++){
        ValObj.value += selectObj[i].value + "&";
        TextObj.text += selectObj[i].text + "&";
    }
    var form = document.getElementById('fruitForm');
    form.action = "xx.do"
    form.submit();
}
//-->
</script>

String allFruitVal = request.getParameter("fruitValue");
String fruitValue [] = allFruitVal.split("&");
String allFruitText = request.getParameter("fruitText");
String fruitText [] = allFruitText.split("&");