изменить поле выбора в текстовое поле в javascript

90
9

<select style="height:25px;"class="textbox">
<option selected>Select item</option>
<option value="1" >Gold cad.</option>
<option value="2">Gold rawa</option>
<option value="3">Silver 9999</option>
<option value="4">Silver chorsa</option>
</select>

Я хочу показать элемент select box в текстовом поле, заменив поле select текстовым полем на клике

спросил(а) 2012-06-21T07:22:00+04:00 8 лет, 3 месяца назад
1
Решение
57

См. Этот LIVE DEMO

Javascript:

var dropDown = document.getElementById("dropdown")
dropDown.onchange = function() {
var dropDownValue = this.options[this.selectedIndex];
dropDown.style.display = 'none';

var textBox = document.getElementById("textbox");
textBox.style.display = 'block';
textBox.value = dropDownValue.text;
};

HTML:

<select style="height:25px;" id="dropdown">     
<option selected>Select item</option>
<option value="1" >Gold cad.</option>
<option value="2">Gold rawa</option>
<option value="3">Silver 9999</option>
<option value="4">Silver chorsa</option>
</select>
<input type="text" id="textbox" class="inactive" />

CSS:

.inactive {
display: none;
}

ответил(а) 2012-06-21T07:54:00+04:00 8 лет, 3 месяца назад
41

Например

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function toggle()
{
var div=document.getElementById("Show");
if(div.style.display=="none")
{
div.style.display="block";
}
else

{
div.style.display="none";
}
}
function changeText (value)
{
document.getElementById("text").value=value;
toggle();
}

</script>
</head>

<body>
<input id="text" type="text" width="150px" height="20px" onfocus="toggle()" />
<div id="Show" style="width:150px; display:none; border:1px solid red" >
<div style="border-bottom:1px solid #03F" onclick="changeText('1')">Gold cad</div>
<div style="border-bottom:1px solid #03F" onclick="changeText('2')">Gold rawa</div>
<div style="border-bottom:1px solid #03F" onclick="changeText('3')">Silver 9999</div>
</div>

</body>
</html>

это пример, даже это так плохо.

ответил(а) 2012-06-21T07:47:00+04:00 8 лет, 3 месяца назад
40

Что-то вроде этого помогает вам:

$('select.textbox').change(function(){
$('<input>')
.attr('name', $(this).attr('name'))
.val($(this)
.find('option:selected'))
.insertAfter($(this).hide());
});

ответил(а) 2012-06-21T07:28:00+04:00 8 лет, 3 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема