Изменение размера окна выбора, чтобы обнять выбранный текст - PullRequest
Новая
       4

Изменение размера окна выбора, чтобы обнять выбранный текст

0 голосов
/ 20 сентября 2009

Я использую Javascript для динамического добавления новых опций в выпадающий список, и когда список возвращается к выбранному элементу со стрелкой справа от него, чтобы развернуть список, поле, содержащее выделенный текст, имеет ширину, равную самый широкий текст в списке опций.

Итак, я бы хотел, чтобы ширина рамки обнимала текст, если вы понимаете, о чем я, без лишнего пробела справа от текста в блоке.

Большое спасибо, если кто-нибудь может мне помочь с этим: -)

1 Ответ

3 голосов
/ 20 сентября 2009

Это просто, просто удалите содержимое скрытых параметров (скопируйте его в заголовок параметра) и восстановите его при выбранном фокусе.

Код: 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...