Question

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

Answer 1

除非你打电话给网络服务器，否则ajax在这里没用。

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

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

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

Answer 2

如果你使用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>

如果您的选择选项需要是动态的，那么jjery的ajax非常简单。如果你已经知道那里会是什么，让php填充隐藏的选择框，焦点事件将显示它们。

可编辑的下拉？

2 个答案: