Совмещение input+select "а-ля combobox"

Статус
В этой теме нельзя размещать новые ответы.

SolutionFix

17 лет програмлю ;)
Регистрация
20 Ноя 2006
Сообщения
272
Реакции
351
В общем такая задача, помогите вдруг кто знает.
Нужно совместить input+select, чтобы когда пользователь выбирал option в select-e, оно подставлялось в input, а визуально это выглядело как один элемент.
Необходимо реализовать без использования JS для изменения ширины/видимости элементов, только для заполнения input из select.
Стандартные решения - например вот такое, я давно знаю:

HTML:
 <style type="text/css">
            .select-and-input {
                position: relative;
                height: 25px;
                width: 100px;
            }
            .select-and-input select {
                position: absolute;
                z-index: 0;
                top: 0;
                left: 0;
                height: 23px;
                width: 100px;
            }
 
            .select-and-input input {
                position: absolute;
                z-index: 1;
                top: 0;
                left: 0;
                height: 18px;
                padding:0;
                width: 78px;
            }
</style>
 
            <div class="select-and-input">
                <select name="selectName" onchange="parentNode.getElementsByTagName('input')[0].value=value">
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                </select>
                <input type="text" name="inputText"/>
            </div>

Но счас возникла задача - как сделать "плавающую" ширину. То есть в приведенном выше коде нужно чтобы у элементов было width: 100%.
Очень неохота дописывать костыли на js/jquery по изменению ширины, так как при изменении ширины окна браузера, динамическом изменении ширины других элементов это все надо пересчитывать, и абсолютно все варианты учесть довольно сложно, да и костыль есть костыль.
Помогите, если кто знает css получше меня, и знает как ему блин сказать "налложить два элемента друг на друга, растянув первый на 100% по ширине, а второй на 100% - N pixel".
Спасибо.
 
А чем не устраивает на JQuery autocomplete?
 
- тем что надо подключать jquery
- тем что сам select у меня не такой простой как в приведенном примере, там есть группы, навешано обработчиков и так далее
 
Хочешь сделать что-то хорошо, сделай это сам.
Короче вдруг кому потом пригодится

HTML:
<div style="width: 100%;">
        <select style="width: 100%;" onchange="parentNode.getElementsByTagName('input')[0].value=value">
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
        </select>
        <div style="margin-right: 22px; margin-top: -22px">
            <input style="width: 100%; height: 14px;">
        </div>
</div>

PS Закройте плз. тему у кого права есть
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху