可编辑的下拉菜单？

我有一个带有4个文本框的php页面，每个文本框都有焦点时需要“下拉”。单击选项将填充（可编辑）文本框并关闭下拉菜单。文本框当然是html表单的一部分。我如何使用javascript或ajax使用最小代码内联这样做？可编辑的下拉菜单？

来源

2009-10-24 Web 8080

除非你打电话给web服务器，否则在这里ajax是无用的。

您需要拥有或创建一个div，因为它位于您的输入框下方，并且绝对定位对于确保相对于输入框的放置位置很有用。

您应该只有一个功能，所以它应该适应输入字段，因此绝对定位的原因。

您需要跟踪此div中的按键事件和鼠标点击事件，并确保一次只打开一个事件，因此请使用onblur，以便在用户单击其他任何位置时关闭div。

来源

2009-10-24 04:20:19

如果你使用jQuery，你可以非常容易地做到这一点。如果您选择选项必须是动态的，AJAX是非常简单的使用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>

：

，你可以调整这个根据自己的喜好。如果你已经知道那里会发生什么，让php填充隐藏的选择框，焦点事件将显示它们。

来源

2009-10-25 04:03:24

可编辑的下拉菜单？

回答

相关问题