HTML列表添加文本框

我需要你的幫助我想每次向列表中添加一種成分時都要放一個小文本框。就在它旁邊，我可以把數量。有人能幫助我嗎？
下面是HTML：HTML列表添加文本框

<html> 
    <head> 
    <title>Ingredient</title> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="themes/receta.min.css" /> 
    <link rel="stylesheet" href="themes/receta.css" /> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> 
    <script src="js/recetas.js"> </script> 

<body> 
    <label for="receta">Nombre Receta:</label><br> 
    <input type="text" name="receta" value="" maxlength="20" /><br> 

<h1>INGREDIENTES</h1> 
<ul> 

</ul> 
<select onchange="selectIngredient(this);"> 
    <option value="Cheese">Cheese</option> 
    <option value="Olives">Olives</option> 
    <option value="Pepperoni">Pepperoni</option> 
    <option value="Milk">Milk</option> 
</select> 
<button>GUARDAR</button>  
<li><a href="resumen.html" data-transition="none" rel="external">testing2</a></li> 
</body> 
</html>

這裏是我不知道如何改變這樣我就可以把文本框的JS：

function selectIngredient(select) 
     { 
      var $ul = $(select).closest('.ui-select').prev('ul'); 
    console.log($ul[0]) 
     if ($ul.find('input[value=' + $(select).val() + ']').length == 0) { 
     console.log('s') 
      $ul.append('<li onclick="$(this).remove();">' + 
       '<input type="hidden" name="ingredients[]" value="' + 
       $(select).val() + '" /> ' + 
       $(select).find('option:selected').text() + '</li>'); 
     } 
     }

來源

2012-11-16 Juan Carlos

你需要做的第一件事就是解決您的無效的HTML。 – j08691

具體來說，所有的內容標籤（divs，buttons等）都應該放在body標籤中。 body元素之後的div也永遠不會關閉。 –

我不明白我的html工作正常。 –

有你的HTML的幾個問題這使得它很奇怪，但只是回答你的問題，並幫助你繼續努力。

function selectIngredient(select) 
{ 
    var ul = $("ul"); 
    if (ul.find('input[value=' + $(select).val() + ']').length == 0) 
    { 
    var li = '<li><input type="hidden" name="ingredients[]" value="' + $(select).val() + '" /> ' + $(select).find('option:selected').text() + '<input type="text" name="quantity[]" value="0" />' + '<a onclick="$(this).parent().remove();"> Remove </a> </li>'; 
    ul.append(li); 
    } 
}

這應該工作，但是你應該給一個ID或類到您的列表，所以它會更容易找到它，這個代碼將在整個頁面中的項目添加到每個列表。

無論如何，我希望它能幫助你。

來源

2012-11-16 17:49:40 darks

我不知道我是否理解正確，但是我在代碼中看到的是隱藏的輸入和列表中的刪除。我刪除隱藏的屬性，並將成分的名稱放在一個跨度設置那裏刪除功能，我設置了一個id爲ul命名ingredientes。

下面的代碼：

$("#addIng").change(function(){ 
     var $ul = $("#ingredientes"); 
console.log($ul[0]) 
    if ($ul.find('input[value=' + $(this).val() + ']').length == 0) { 
    console.log('s') 
     $ul.append('<li>' + 
      '<input name="ingredients[]" value="' + 
      $(this).val() + '" /> <span onclick="$(this).parent().remove();">' + 
      $(this).find('option:selected').text() + '</span></li>'); 
     } 

});

jsfiddle

來源

2012-11-16 17:50:38

HTML列表添加文本框

回答

相關問題