javascript - HTML 列表添加文本框

标签 javascript jquery html css cordova

我需要你的帮助我想在每次向列表中添加成分时放一个小文本框。就在它旁边,所以我可以放数量。有人可以帮助我吗?
这是 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>');
      }
        }

最佳答案

我不知道我是否理解正确,但我在您的代码中看到的是隐藏的输入和列表中的删除。我删除了隐藏的属性并将成分的名称放在一个跨度上以在那里设置删除功能,我将一个 id 设置为 ul 命名的成分。

代码如下:

$("#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

关于javascript - HTML 列表添加文本框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13420250/

相关文章:

javascript - 尝试通过拖放 Jquery 文件设置文件输入值

javascript - 如何在android中单击时将选定的行图标替换为列表项上的另一个图标

JavaScript - 必须点击两次自定义 Google 登录

javascript - 这个 for/in 循环究竟是如何工作的?

javascript - Jquery删除span对象的类而不传递Id

javascript - jQuery - 如何检查一个元素是否存在?

javascript - 如何从 css 中的 UI 中完全删除底部滚动条

javascript - 错误 : "Too much recursion"

html - vuetify `v-icon` 可见性由 css 规则更改后滞后

javascript - 从 Swagger 生成静态 Javascript 客户端以在 React Native 中使用