копирайте избора на падащо поле в скрито текстово поле

Знам, че това е било разглеждано и преди, но не мога да намеря точно това, което ми трябва....

накратко, трябва да копирам избраната опция от падащо поле в текстово поле. И имам този код, за да го направя:

$(function(){
    $('#font').bind('change', function(){
        $('#input').val($(this).val());
    });
});​

НО страницата се зарежда с предварително избрана опция в падащото поле, което означава, че хората не е задължително да избират опция. Как мога да накарам полето с id #input да показва опцията от падащото меню #font, дори ако потребителят не се ангажира и избере различна опция?

Миро


textfield forms function jquery
person Miro    schedule 03.04.2012    source източник

Отговори (3)


arrow_upward
2
arrow_downward

при зареждане на страницата

$(function(){
    //this first line loads the pre-selected value into the text box
    $('#input').val($('#font option:selected').val());
    //still want to bind the change event
    $('#font').bind('change', function(){
        $('#input').val($('#font option:selected').text());
    });
});

http://jsfiddle.net/Us8CG/5/

вижте цигулката, благодарение на отговора от @MetalFrog.

person jeffery_the_wind    schedule 03.04.2012
comment
благодаря страхотно! само един въпрос... Вместо да се върне стойността в текстовото поле, възможно ли е да се върне текстът? Имам предвид, че стойността е url адрес, докато текстът просто казва Ариел например. Замених последния .val()) с текст.((), но това работи само когато страницата се зарежда. След като променя селекцията, всички опции се показват в текстовото поле една след друга. - person Miro; 03.04.2012
comment
Да, трябва да посочите да актуализирате само избраната стойност от падащото меню. OK ще актуализира отговора, имате нужда от option:selected във функцията, която е обвързана със събитието щракване. - person jeffery_the_wind; 03.04.2012
comment
Благодаря. Току-що разбрах, че има по-просто решение за това... просто попълнете предварително полето за въвеждане със стойността по подразбиране на падащото меню... - person Miro; 04.04.2012

arrow_upward
2
arrow_downward

Просто задействайте промяна на вашия избор по време на зареждането на страницата.

$(function(){        
    $('#font').change( function(){
        $('#input').val( $(this).val() );
    }).trigger('change');
});

JSFiddle: http://jsfiddle.net/MetalFrog/Us8CG/

person MetalFrog    schedule 03.04.2012

arrow_upward
1
arrow_downward

Запазете стойността в #input, когато DOM е готов, след което настройте манипулатора на събития change:

$(function(){
    $('#input').val($('#font').val());
    $('#font').bind('change', function(){
        $('#input').val($(this).val());
    });
});​
person Anthony Grist    schedule 03.04.2012