Javascript 可编辑下拉列表？
我有一个php页面，有4个文本框，当文本框有焦点时，每个文本框都需要一个“下拉列表”。单击选项将填充（可编辑）文本框并关闭下拉列表。文本框当然是html表单的一部分。如何使用最少的代码与javascript或ajax内联实现这一点？除非您调用的是Web服务器，否则ajax在这里毫无用处 您需要拥有或创建一个div，因为它位于输入框下方，绝对定位将有助于确保它相对于输入框适当放置 您应该只有一个函数，因此它应该适用于输入字段，这就是绝对定位的原因Javascript 可编辑下拉列表？,javascript,php,Javascript,Php,我有一个php页面，有4个文本框，当文本框有焦点时，每个文本框都需要一个“下拉列表”。单击选项将填充（可编辑）文本框并关闭下拉列表。文本框当然是html表单的一部分。如何使用最少的代码与javascript或ajax内联实现这一点？除非您调用的是Web服务器，否则ajax在这里毫无用处 您需要拥有或创建一个div，因为它位于输入框下方，绝对定位将有助于确保它相对于输入框适当放置 您应该只有一个函数，因此它应该适用于输入字段，这就是绝对定位的原因 您将希望跟踪此div中的按键和鼠标单击事件，并确保
您将希望跟踪此div中的按键和鼠标单击事件，并确保一次只打开一个，因此使用onblur，以便如果用户单击其他任何位置，div将关闭。如果使用jquery，您可以非常轻松地执行此操作 您可以根据自己的喜好对此进行调整：
<html>
<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<script language='javascript'>
$(document).ready(function(){
$("input[type='text']").focus(function(){
$(this).parent().find('select').show();
});
$('select').change(function(){
$(this).parent().find('input[type="text"]').val($(this).val());
$(this).hide();
}).blur(function(){
$(this).hide();
});
});
</script>
<form>
<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
<option value=''>----</option>
<option value='1'>opt1</option>
<option value='2'>opt2</option>
<option value='3'>opt3</option>
</select><br/>
</fieldset>
<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
<option value=''>----</option>
<option value='1'>opt1</option>
<option value='2'>opt2</option>
<option value='3'>opt3</option>
</select><br/>
</fieldset>
<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
<option value=''>----</option>
<option value='1'>opt1</option>
<option value='2'>opt2</option>
<option value='3'>opt3</option>
</select><br/>
</fieldset>
<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
<option value=''>----</option>
<option value='1'>opt1</option>
<option value='2'>opt2</option>
<option value='3'>opt3</option>
</select><br/>
</fieldset>
</form>
</html>
$（文档）.ready（函数（）{
$（“输入[type='text']”）。焦点（函数（）{
$（this.parent（）.find（'select'）.show（）；
});
$（'select'）.change（函数（）{
$（this.parent（）.find（'input[type=“text”]）.val（$（this.val（））；
$（this.hide（）；
}).blur（函数（）{
$（this.hide（）；
});
});
----
opt1
opt2
opt3
----
opt1
opt2
opt3
----
opt1
opt2
opt3
----
opt1
opt2
opt3