JQuery добавить новые div, которые показывают поля ввода после выбора меню - PullRequest
Новая
       14

JQuery добавить новые div, которые показывают поля ввода после выбора меню

0 голосов
/ 23 февраля 2012

Для каждого пользователя есть несколько ссылок. Каждая ссылка может иметь разные атрибуты. Поэтому я хочу, чтобы пользователь сначала выбрал ссылочный атрибут, а затем для этого атрибута поля ввода стали видимыми. Если у пользователя несколько ссылок, он может добавить новую ссылку, просто нажав кнопку «Добавить», появится новый выбор и т. Д.

Я пытался сделать это с помощью JavaScript, но были некоторые незначительные проблемы. Я нашел довольно простое решение jQuery для обработки выделения:

HTML 

<form>
    <select id="sel">
        <option value="">- select -</option>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>          
    </select>
    <input type="text" class="option1" /><span>Textbox label 1</span>
    <input type="text" class="option2" /><span>Textbox label 2</span>
    <input type="text" class="option2" /><span>Textbox label 2</span>
    <input type="text" class="option2" /><span>Textbox label 2</span>
</form>

JQuery 

$(function() {
    $('#sel').change(function() {
        $("input").hide().filter("." + $(this).find("option:selected").val()).show();
    });
    $("input").focus(function() {
        $(this).next("span").fadeIn(1000);
    }).blur(function() {
        $(this).next("span").fadeOut(1000);
    });
});

CSS 

input {
    display:none;
}
span {
    display:none;
}

и добавление новых элементов div .. 

var inival=1;
function addNew(){
    var newArea = add_New_Element();
    var htcontents = "<select id="sel">"+
        "<option value="">- select -</option>"+
        "<option value="option1">Option 1</option>"+
        "<option value="option2">Option 2</option>"  +        
    "</select>"+
    "<input type="text" class="option1" /><span>Textbox label 1</span>"+
    "<input type="text" class="option2" /><span>Textbox label 2</span>"+
    "<input type="text" class="option2" /><span>Textbox label 2</span>"+
    "<input type="text" class="option2" /><span>Textbox label 2</span>"; 
    document.getElementById(newArea).innerHTML = htcontents;            
}

function add_New_Element() {
    inival=inival+1; 
    var ni = document.getElementById('area');
    var newdiv = document.createElement('div'); 
    var divIdName = 'Div #'+ inival;
    newdiv.setAttribute('id',divIdName);
    ni.appendChild(newdiv);
    return divIdName;
}

function addNew();

Но вы можете видеть, что это очень долгое решение. Я думаю, что есть более эффективные и короткие решения. Любая помощь очень ценится.

1 Ответ

1 голос
/ 09 марта 2012

Хотя это не мое решение, оно может помочь другим людям

http://jsfiddle.net/MXXXT/16/

оригинальный ответ принадлежит Джеффу

...