没咋用过js，大致意思就是 <select name="type" id="type" style=" color:#000; height:22px; width:110px;">
<option value="1">选项一</option>
<option value="2">选项一</option>
<option value="3">手动输入</option>
</select>当你选中手动输入的时候后面就会出现一个input 去写详细的东西。搜索了一下也不知道在js里面这个应该叫什么，应该搜索什么样的关键字？js的大神们能1分钟给我个简单的案例代码吗？
<option value="1">选项一</option>
<option value="2">选项一</option>
<option value="3">手动输入</option>
</select>当你选中手动输入的时候后面就会出现一个input 去写详细的东西。搜索了一下也不知道在js里面这个应该叫什么，应该搜索什么样的关键字？js的大神们能1分钟给我个简单的案例代码吗？
<select name="type" id="type" style=" color:#000; height:22px; width:110px;" onchange="showInput(this)">
<option value="1">选项一</option>
<option value="2">选项一</option>
<option value="3">手动输入</option>
</select>
<input type="text" name="input" id="input" style="visibility:hidden;"/>
<script type="text/javascript">
function showInput(select) {
if(select.options[select.selectedIndex].value == 3)
document.getElementById('input').style.visibility = 'visible';
else
document.getElementById('input').style.visibility = 'hidden';
}
</script>
<option value="1">选项一</option>
<option value="2">选项一</option>
<option value="3">手动输入</option>
</select><script>
function test(o){
if(o.value=="3"){
var newInput = document.createElement("input");
o.parentNode.appendChild(newInput);
}
}</script>
<option value="1">选项一</option>
<option value="2">选项一</option>
<option value="3">手动输入</option>
</select>
<input type="text" name="input" id="input" style="visibility:hidden;"/>
<script type="text/javascript">
function showInput(select) {
if(select.options[select.selectedIndex].value == 3)
document.getElementById('input').style.display = 'block';
else
document.getElementById('input').style.visibility = 'none';
}
</script>这样也可以
就是这个意思，谢谢了，也感谢其他几个朋友。。能让他在选中1,2的时候后面的input只显示灰色但是没办法填写，只有选中3之后才会把后面的input真正输出出来吗？怪我第一次提问的时候没说清楚。。
<select name="type" id="type" style=" color:#000; height:22px; width:110px;" onchange="showInput(this)">
<option value="1">选项一</option>
<option value="2">选项一</option>
<option value="3">手动输入</option>
</select>
<input type="text" name="input" id="input" disabled="true"/>
<script type="text/javascript">
function showInput(select) {
if(select.options[select.selectedIndex].value == 3)
document.getElementById('input').disabled = false;
else
document.getElementById('input').disabled = true;
}
</script>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<select name="type" id="type" style=" color:#000; height:22px; width:110px;" onchange="showInput(this)">
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">手动输入</option>
</select>
<input type="text" name="input" id="input" disabled="disabled" value="Other" />
<script type="text/javascript">
var select = document.getElementById('type'),
text = document.getElementById('input');
select.onchange = function(){
var len = select.options.length;
if(select.selectedIndex === len - 1){
text.disabled = '';
text.value = '';
text.focus();
}else{
text.disabled = 'disabled';
text.value = 'Other';
}
}
</script>
</body>
</html>
差不多是这个意思，我刚才想自己改一下，一直改不出来。最终效果应该是这样的。<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<select name="type" id="type" style=" color:#000; height:22px; width:110px;" onchange="showInput(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" name="input" id="input" disabled="true" value="在此填写详细内容" style="border:1px solid #ccc;"/>
<script type="text/javascript">
function showInput(select) {
if(select.options[select.selectedIndex].value == 3)
document.getElementById('input').disabled = false;
//document.getElementById('input').style.border = '1px solid #000';
else
document.getElementById('input').disabled = true;
//document.getElementById('input').style.border = '1px solid #ccc';
}
</script>
但是这样的话代码直接报错了。
当选中前1,2的时候一方面不能选中，另一方面应该显示成灰色去反馈给用户，让用户知道不能选中。只用当选中3的时候边框颜色才会变成黑色，告诉用户这时才是正常的状态。。
我了个去啊，一语惊醒梦中人啊！！！！！！同样也严重感谢tzg157以及各个帮助的兄弟们