Попытка добавления элементов списка к динамическому id

Привет Я пытаюсь добавить элементы списка «дети» в списки «family». У меня есть первая форма для создания семейств и вторая форма, которая является полем выбора для создания детей и добавления их в выбранное семейство из поля выбора. Идентификаторы Ol динамически создаются, а параметры drop down динамически создаются.Попытка добавления элементов списка к динамическому id

Когда создается опция, значения увеличиваются каждый раз, когда производится семейство и опция.

Мой план состоит в том, чтобы ссылаться на семейства OL, используя параметры, в основном соответствующие семейству к моменту его создания.

Например, когда я делаю family1, будет вариант создан с этой family1 со значением 1, а также при создании family2, вариант 2 создается со значением 2.

Я пытаясь добавить детей в семье, но я понятия не имею, как ссылаться на идентификаторы ПР в

это то, что я до сих пор

<!DOCTYPE html> 

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="mystyle.css"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 

$(document).ready(function() { 
    var i = 1; 
    $(document).on('click', "#submit", function() { 
     var str = ' ' 
     var family = document.getElementById('famname').value; 
     $('#family input[type = text],input[type = text],input[type = text],input[type = text]').each(function() { 
      str = str + $(this).val() + ' '; 
      $(this).val(''); 
     }); 

     $("<ol>", { 
      text: str, 
      id: "family+" + i 
     }).appendTo("#container").append($('<button />', { 
      'class': 'btn2', 
      text: 'Remove' 
     })); 

     $('#select').append($('<option />', { 
      text: family, 
      value: i 
     })); 

     i++; 
    }); 

    // Append items functions 
    $(document).on('click', "#submit2", function() { 
     var child = prompt("Please enter the child you want to add"); 
     var e = document.getElementById("select"); 
     var str = e.options[e.selectedIndex].value; 

     $('<li>', { 
      text: child 
     }).appendTo(? ? ?).append($('<button />', { 
      'class': 'btn', 
      text: 'Remove' 
     })) 
    }); 

    //delete items functions 
    $(document).on('click', '.btn', function() { 
     $(this).closest('li').remove(); 
    }); 

    // delete the list 
    $(document).on('click', '.btn2', function() { 
     $(this).parent().next().remove(); 
     $(this).closest('ol').remove(); 
    }); 

}); 
</script> 

</head> 

<body> 



<form id ="family" method = "post" target="_parent"> 
Enter Family Name <input type = "text" name = "famname" id = "famname" > <br> 
Enter Address <input type = "text" name = "address"> <br> 
Enter Father's name <input type = "text" name = "dad"> <br> 
Enter Mother's name<input type = "text" name = "mom"> <br> 
<input id="submit" type="button" value="Submit" name="submit"> 
</form> 

<p>Select Which family you want to add a child to</p> 
<form id = "child"> 
<select id ="select"> 
</select> 
<input id="submit2" type="button" value="Submit" name="submit"> 

</form> 

<div id = "container"> 

</div> 

</body> 
</html>

Совет и помощь оценили

http://jsfiddle.net/Jnewguy/4LVTz/

источник

2013-10-10 user2809321

Пожалуйста размещать только соответствующую часть (ы) кода в вашем вопросе. Это способ долго читать (если вы не платите нам;) – Simon

Скрипка поможет! вы можете это сделать? – aIKid

http://jsfiddle.net/Jnewguy/4LVTz/ вот вы, ребята, жаль просто хотели дать всю информацию, которая поможет = x – user2809321

Попробуйте

$(document).ready(function() { 
    var i = 1; 

    var $famname = $('#famname'); 
    var $finputs = $('#family input[type = text]').not('#famname'); 
    $(document).on('click', "#submit", function() { 
     var family = $famname.val(); 

     var $ol = $("<ol>", { 
      id: "family-" + i 
     }).appendTo("#container"); 

     $('<li />', { 
      text: family 
     }).append($('<button />', { 
      'class': 'btn2', 
      text: 'Remove' 
     })).appendTo($ol); 

     $finputs.each(function() { 
      $('<li />', { 
       text: this.value 
      }).appendTo($ol); 
      $(this).val(''); 
     }); 


     $('#select').append($('<option />', { 
      text: family, 
      value: i 
     })); 

     i++; 
    }); 

    // Append items functions 
    var $select = $('#select') 
    $(document).on('click', "#submit2", function() { 
     var child = prompt("Please enter the child you want to add"); 

     $('<li>', { 
      text: child 
     }).appendTo('#family-' + $select.val()).append($('<button />', { 
      'class': 'btn', 
      text: 'Remove' 
     })) 
    }); 

    //delete items functions 

    $(document).on('click', '.btn', function() { 
     $(this).closest('li').remove(); 
    }); 

    // delete the list 

    $(document).on('click', '.btn2', function() { 
     $(this).parent().next().remove(); 
     $(this).closest('ol').remove(); 

    }); 
});

Demo: Fiddle

источник

2013-10-10 04:53:39

Попытка добавления элементов списка к динамическому id

ответ

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