Блог

Главная - Вопросы по программированию - Текстовое поле / выпадающая комбинация

Текстовое поле / выпадающая комбинация

#html #css

#HTML #css

Вопрос:

Я пытаюсь «объединить» текстовое поле и выпадающий список. Кажется, я не могу выстроить их в ряд.

введите описание изображения здесь

Мой код:

 <input name="" type="text" maxlength="50" style="width: 665px; padding:0px; z-index: 2; position: absolute;" />
<select name="" style="z-index: 1; width: 695px; padding:0px; position:absolute;">
    <option value="Value for Item 1" title="Title for Item 1">Item 1</option>
    <option value="Value for Item 2" title="Title for Item 2">Item 2</option>
    <option value="Value for Item 3" title="Title for Item 3">Item 3</option>
</select>

Комментарии:

1. Кстати: виджет, который вы пытаетесь создать, называется полем со списком .

2. Скрипка , кажется, работает нормально. edit — Я имею в виду выстроенный правильно!

Ответ №1:

Я создал демо-версию для вас здесь:http://jsfiddle.net/aJaa6 /

* обратите внимание, что я изменил ширину, чтобы она помещалась на панели.

CSS:

 #container
{
    position: relative;
}

#input
{
position: absolute;
top: 0;
left: 0;
z-index: 999;
padding: 0;
margin: 0;
}

#select
{
position: absolute;
top: 0;
left: 0;
padding: 0;
margin: 0;
}

Разметка:

 <div id="container">
<input id="input" name="" type="" style="width: 100px;">
<br>
<select id="select" name="" style="width: 115px;">
<option value="Value for Item 1" title="Title for Item 1">Item 1</option>
<option value="Value for Item 2" title="Title for Item 2">Item 2</option>
<option value="Value for Item 3" title="Title for Item 3">Item 3</option>
</select>
</div>

Ответ №2:

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

  <html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
   <script>
    function showDrop(){
        $('#select').attr('size',3);
        $("#select").show();
    }
    function populateTextBox(){
            var val = $("#select option:selected").text();
        $("#input").val(val);
    }
   </script>
    </head>
<body>
   <div id="container">
<input id="input" name="" type="" style="width: 100px;" onclick="showDrop();" />
<br>
<select id="select" name="" style="display:none;width: 100px;" onclick="populateTextBox();">
<option value="Value for Item 1" title="Title for Item 1">Item 1</option>
<option value="Value for Item 2" title="Title for Item 2">Item 2</option>
<option value="Value for Item 3" title="Title for Item 3">Item 3</option>
</select>
</div>


</body>
</html>

Ответ №3:

Рассматривали ли вы возможность использования FlexBox? Он выполняет то, что вы хотите, и имеет множество приятных настраиваемых функций.

Комментарии:

1. FlexBox (по крайней мере, в Firefox) отлично визуализируется (по крайней мере, на их странице-примере, на которую вы ссылались).

2. Ссылка теперь разорвана.

Ответ №4:

Можете ли вы попробовать этот код

 #input{ position:absolute; top:2; left:2; z-index:999; padding:0; margin:0; }
#select { position:absolute; top:0; left:0; padding:0; margin:0; }  
 <input id="input" type="text" style="width:100px;">
<select id="selectbox" style="width:123px;">
    <option value="Value for Item 1" title="Title for Item 1">Item </option>
    <option value="Value for Item 2" title="Title for Item 2">Item </option>
    <option value="Value for Item 3" title="Title for Item 3">Item 3</option>
</select>