Редактируемое раскрытие?

У меня есть php-страница с 4 текстовыми полями, каждая из которых нуждается в «выпадающем списке», когда текстовые поля имеют фокус. Щелчок по параметрам заполнит (редактируемое) текстовое поле (ы) и закроет выпадающее меню. Текстовые поля, конечно же, являются частью html-форм. Как я могу сделать это с помощью javascript или ajax, используя минимальный код?Редактируемое раскрытие?

источник

2009-10-24 Web 8080

Если вы не вызываете веб-сервер, ajax здесь бесполезен.

Вам нужно будет создать или создать div, так как он находится ниже вашего поля ввода, и абсолютное позиционирование будет полезно для обеспечения его надлежащего размещения относительно поля ввода.

У вас должна быть только одна функция, поэтому она должна быть адаптирована к полям ввода, поэтому причина абсолютного позиционирования.

Вам нужно будет отслеживать события keypress и mouseclick в этом div и следить за тем, чтобы только один был открыт одновременно, поэтому у него есть onblur, так что если пользователь нажимает в другом месте, div закрывается.

источник

2009-10-24 04:20:19

Если вы используете 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>

если ваши выбора параметров должны быть динамичными, Ajax очень просто с JQuery. если вы уже знаете, что там будет, php заполнит скрытые флажки, и основное событие покажет их.

источник

2009-10-25 04:03:24

Редактируемое раскрытие?

ответ

Смежные вопросы