将选择框更改为javascript中的文本框

Question

<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>

I want to show select box element in textbox by replacing select box with text box on click 我想通过在单击时将选择框替换为文本框来在文本框中显示选择框元素

Answer 1

Refer this LIVE DEMO 请参阅此现场演示

Javascript: 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: 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: CSS：

.inactive {
    display: none;
}

Answer 2

Something like this helps you: 这样的事情可以帮助您：

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

Answer 3

For example 例如

<!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>

this is example ,even it so bad. 这是一个例子，即使如此糟糕。

将选择框更改为javascript中的文本框

问题描述

3 个解决方案

解决方案1
1 2012-06-21 04:54:12

Javascript: Javascript：

HTML: HTML：

CSS: CSS：

解决方案2
0 2012-06-21 04:28:01

解决方案3
0 2012-06-21 04:47:56

将选择框更改为javascript中的文本框

问题描述

3 个解决方案

解决方案1 1 2012-06-21 04:54:12

Javascript: Javascript：

HTML: HTML：

CSS: CSS：

解决方案2 0 2012-06-21 04:28:01

解决方案3 0 2012-06-21 04:47:56

解决方案1
1 2012-06-21 04:54:12

解决方案2
0 2012-06-21 04:28:01

解决方案3
0 2012-06-21 04:47:56