可編輯的下拉菜單？

我有一個帶有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

可編輯的下拉菜單？

回答

相關問題