0

私はJavascriptを使用して新しいオプションをドロップダウンリストに動的に追加しています.リストが選択された項目に戻り、その右側に矢印が表示されてリストが展開されると、選択されたテキストを含むボックスは、オプションリスト。

したがって、ボックス内のテキストの右側に余分な空白がなくても、私が何を意味するかを知っている場合は、ボックスの幅をテキストに合わせてください。

誰かがこれで私を助けることができれば、どうもありがとう:-)

4

1 に答える 1

3

非表示のオプションの内容を削除 (オプションのタイトルにコピー) し、選択したフォーカスで復元するだけです。

コード：

<html><head><title>Auto size select</title>

<script>
var resized = false;

function resizeSelect(selected) {
  if (resized) return;
  var sel = document.getElementById('select');
  for (var i=0; i<sel.options.length; i++) {
    sel.options[i].title=sel.options[i].innerHTML;
    if (i!=sel.options.selectedIndex) sel.options[i].innerHTML='';
  }
  resized = true;
  sel.blur();
}

function restoreSelect() {
  if (!resized) return;
  var sel = document.getElementById('select');
  for (var i=0; i<sel.options.length; i++) {
    sel.options[i].innerHTML=sel.options[i].title;
  }  
  resized = false;
}
</script>

</head>
<body onload="resizeSelect(this.selectedItem)">
<select id="select" 
  onchange="resizeSelect(this.selectedItem)"
  onblur="resizeSelect(this.selectedItem)"
  onfocus="restoreSelect()">
<option>text text</option>
<option>text text text text text</option>
<option>text text text </option>
<option>text text text text </option>
<option>text</option>
<option>text text text text text text text text text</option>
<option>text text</option>
</select>
</body></html>
于 2009-09-20T17:15:02.483 に答える