[英]JavaScript/HTML - Add up the values from dropdown list and textbox
[英]Html list add textbox
我需要您的帮助,我想在每次将成分添加到列表时都放一个小文本框。 就在它旁边,这样我就可以放入数量。 有人可以帮我吗?
这是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>');
}
}
我不知道我是否理解正确,但是我在您的代码中看到的是隐藏的输入和列表中的删除。 我删除了隐藏的属性,并将配料的名称放到一个跨度上,以在其中设置删除功能,然后为ul命名的Ingredientes设置一个ID。
这是代码:
$("#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>');
}
});
您的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或类,这样将更容易找到它,此代码会将项目添加到整个页面的每个列表中。
希望它无论如何对您有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.