问一个简单的问题：关于下拉框和编辑

想做成像QQ个人资料里面的"职业"修改那样的效果；
1、通过下拉框来选择修改的值。
2、如果下拉框中没有想要修改的值，我们还可以自己添加进去。不知道大家听明白没有？
大家可以打开QQ的个人资料→职业中看一下，比如职业中有很多职业供选择，但是没有“掏大粪”的职业，那么我要修改为
“掏大粪”就不能利用选择只能直接添加了。
我现在想在jsp页面上实现上述效果，希望朋友们帮帮忙！
谢谢！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

此回复为自动发出,仅用于显示而已，并无任何其他特殊作用
楼主【JadoNet】截止到2008-07-11 09:30:08的历史汇总数据(不包括此帖)：
发帖的总数量:26                       发帖的总分数:1420                     每贴平均分数:54
回帖的总数量:304                      得分贴总数量:145                      回帖的得分率:47%
结贴的总数量:25                       结贴的总分数:1420
无满意结贴数:2                        无满意结贴分:50
未结的帖子数:1                        未结的总分数:0
结贴的百分比:96.15 %               结分的百分比:100.00%
无满意结贴率:8.00  %               无满意结分率:3.52  %
值得尊敬
兄弟，分全部给我吧，呵呵，我给你源代码，我就是这么做的哦。
<HTML>
<HEAD>
<META http-equiv='Content-Type' content='text/html; charset=gb2312'>
<TITLE>可输入的下拉框</TITLE>
</HEAD>
<BODY ><div style="position:relative;">
<span style="margin-left:100px;width:18px;overflow:hidden;">
<select style="width:118px;margin-left:-100px" onchange="this.parentNode.nextSibling.value=this.value">
<option value="www.souzz.net"> souzz </option>
<option value="www.eWebSoft.com"> eWebSoft </option>
<option value="WEB开发者"> WEB开发者 </option>
</select></span><input name="box" style="width:100px;position:absolute;left:0px;">
</div><script >
function addOption()
{
var select_obj = document.getElementById("potCd");
var text_value = document.getElementById("txtPlace").value;
if (select_obj.length ) {
for (var i=0;i<select_obj.length;i++){
   if (select_obj.options[i].value == text_value)
     {
      select_obj.selectedIndex = i;
      document.getElementById('txtPlace').value=select_obj.options[i].text;
      return;
     }else if(select_obj.options[i].value.indexOf(text_value)==0){
select_obj.selectedIndex = i; }
}
}

}

</script>

<td valign="top">
<select name="potCd" style=" width:220; position:absolute;clip: rect(2 100% 90% 201)" onchange="document.getElementById('txtPlace').value=this.value">
<option value=""> </option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="yellow">yellow</option>
<option value="black">black</option>
</select>
<input name="txtPlace" type="text" size="32" onblur="addOption()" style="font-size:12px; border-bottom: 1px solid #a0a0a0; background-color:transparent;">
</td>
</BODY></HTML>
一般要 javascript实现随便搜一下  可输入的下拉框就找到了
<HEAD>
<META http-equiv='Content-Type' content='text/html; charset=gb2312'>
<TITLE>test</TITLE>
</HEAD>
<BODY ><div style="position:relative;">
<span style="margin-left:100px;width:18px;overflow:hidden;">
<select style="width:118px;margin-left:-100px" onchange="this.parentNode.nextSibling.value=this.value">
<option value="www.souzz.net"> 1 </option>
<option value="www.eWebSoft.com"> 2 </option>
<option value="3"> 3 </option>
</select></span><input name="box" style="width:100px;position:absolute;left:0px;">
</div>
</BODY></HTML>

附上版权原始网页 http://www.jb51.net/article/66.htm
上楼的兄弟太狠了，发言的机会都没有了。
这是WEB版的。我这还有其它的方式。
算了，以前总结了几个放在那里的，呵呵。都快放忘记了，我全部贴出来吧，这里总共三种方式
  可输入的下拉框一般有两种方式实现：
       方法一：在<select></select> 下隐藏一个text 输入框
<script>
function addOption()
{
var select_obj = document.getElementById("potCd");
var text_value = document.getElementById("txtPlace").value;
if (select_obj.length ) {
for (var i=0;i<select_obj.length;i++){
   if (select_obj.options[i].value == text_value)
     {
      select_obj.selectedIndex = i;
      document.getElementById('txtPlace').value=select_obj.options[i].text;
      return;
     }
}
itemSearchForm.potCd.focus();

alert("入力内容に誤りがあります。");
}

}

</script>

<td valign="top">
<select name="potCd" style=" width:220; position:absolute;clip: rect(2 100% 90% 201)" onchange="document.getElementById('txtPlace').value=this.value">
<option value=""> </option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="yellow">yellow</option>
<option value="black">black</option>
</select>
<input name="txtPlace" type="text" size="32" onblur="addOption()" style="font-size:12px; border-bottom: 1px solid #a0a0a0; background-color:transparent;">
</td>

     方法二：采用javascript  的方法（但是这种方法好像位置不怎么好控制，同时还出现不能放到form里的情况）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>ComboBox Demo</title>
<style>
body          {font-size:9pt;font-family:verdana;}
button        {cursor:hand;border:1px solid black;font-family:arial;font-size:9pt;}
a             {color:red;}
a:hover       {color:blue}
</style>
</head>
<body>
<script src="ComboBox.js"></script>
<script>
dm=new ComboBox("dm")
dm.add(
       new ComboBoxItem("barge",1),
       new ComboBoxItem("benluc",2),
       new ComboBoxItem("benlieeeeck",3),
       new ComboBoxItem("taco",4)
      )
/*
// generate 1000 more to test performance
for (var i = 0; i < 100; i++ )
dm.add(new ComboBoxItem(String(i)));
*/
</script>
<br><br><br>
<button hidefocus onClick="alert(dm.value)">Show Value</button> <button hidefocus
onClick="dm.add(new ComboBoxItem(window.prompt('Type in the text to add',''),window.prompt('Type in a value to add','')))"
>Add Item</button> <button hidefocus onClick="dm.remove(window.prompt('Type in an index to remove',''))"
>Remove Item</button>
<br>
<br>
</body>
</html>3.<HTML>
<HEAD>
<META http-equiv='Content-Type' content='text/html; charset=gb2312'>
<TITLE>可输入的下拉框</TITLE>
</HEAD>
<BODY ><div style="position:relative;">
<span style="margin-left:100px;width:18px;overflow:hidden;">
<select style="width:118px;margin-left:-100px" onchange="this.parentNode.nextSibling.value=this.value">
<option value="www.souzz.net"> souzz </option>
<option value="www.eWebSoft.com"> eWebSoft </option>
<option value="WEB开发者"> WEB开发者 </option>
</select></span><input name="box" style="width:100px;position:absolute;left:0px;">
</div>
</BODY></HTML>
呵呵
lovingprince 倚情王子
不好意思错怪你了