JQUERY Clone DropDown - PullRequest
Новая
       5

JQUERY Clone DropDown

0 голосов
/ 31 мая 2011

Я хочу вставить новую строку в таблицу, содержащую раскрывающийся список и текстовое поле?Мне нужно загрузить DDL новой строки с данными из другой DLL, которая будет заполнена из базы данных.Прямо сейчас у меня есть жесткий код DDL, который я пытаюсь вытащить.Почему новые строки не заполняют его DDL из исходного DDL?Код ниже.Смотрите раздел с надписью //WHY DOESNT THIS WORK???

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function createTextbox(counter){
    return "<input id='"+ counter +  "' type='text' />"
}
function createDropDown(counter){

     var newSelectBox = "<select id='sel'" + counter + "></select>"


    return newSelectBox
}
function createRow(counter){
    return "<tr><td>" + createDropDown(counter) + "</td><td>"+ createTextbox(counter) +  "</td></tr>";
}
function getValuesForPostback(){
    //format as XML, JSON, or Whatever
    var ToReturn = "<items>"; 
    $('#sampleTable tr').each(function(){
    ToReturn += "<item>";
    //Get the textbox value
    ToReturn += "<text>" + $(this).find('input[type=text]').val() + "</text>";

    //Get the select values
    $(this).find('select option:selected').each(function(){
    ToReturn += "<select>" + $(this).val() + "</select>";
    });
    ToReturn += "</item>";
    });
    ToReturn += "</items>";
    return ToReturn;
}
function submitValues()
{
    alert(getValuesForPostback());
    //NOW: Just ajax or post back this value to the server and parse for your data.
}
$(document).ready(function(){
    $("#SourceDDL").hide();

    var counter = 2;
    $('#sampleTable').append(createRow(1));


    $('#btnAdd').click(function(){
        if(counter>10)
          {
               alert("You are only allowed to enter 10 Metrics for this project.");
               return false;
            }   
    $('#sampleTable').append(createRow(counter));

    $('#SourceDDL option').clone().appendTo("'#sel" + counter + "'")//WHY DOESNT THIS WORK???

    alert("'#sel" + counter + "'");
    counter++;
    });

    $('#btnSubmit').click(function(){
    submitValues();
    });
});
</script>
</head>
<body>

<button id="btnAdd">Add</button>
<button id="btnSubmit">Submit</button>
<table id="sampleTable">
</table>



<select id='SourceDDL'>
    <option>Zippy</option>
    <option>ZippyTwo</option>
    <option>ZippyThree</option>
</select>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 31 мая 2011

Вы передаете неверную строку на appendTo - у селекторов нет кавычек.

0 голосов
/ 31 мая 2011

Почему вы пишете 

$("#sampleTable")

, но 

$("'#sel" + counter + "'")

, что разрешается примерно так: 

$("'#selN'")

?По какой-то причине у вас есть дополнительные цитаты.

Запись: 

$("#sel" + counter);
...