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列表添加文本框

回答

相关问题