Jquery html 不工作不知道为什么？答案

【问题标题】：Jquery html not working dont know why?Jquery html 不工作不知道为什么？
【发布时间】：2012-11-08 01:55:33
【问题描述】：

这是html

<!DOCTYPE html>
    <html>
    <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="css/jquery.mobile.structure-1.1.0.min.css" /> 
      <script src="js/jquery-1.7.1.min.js"></script> 
      <script src="js/jquery.mobile-1.1.0.min.js"></script> 
      <script type="text/javascript" charset="utf-8" src="js/ingredients.js"></script>  

      <h1><center>INGREDIENTES</h1>
    <ul>
     <li onclick="this.parentNode.removeChild(this);">
      <input type="hidden" name="ingredients[]" value="Cheese" />
      Cheese
     </li>
     <li onclick="this.parentNode.removeChild(this);">
      <input type="hidden" name="ingredients[]" value="Ham" />
      Ham
     </li>
    </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>

      </html>

这是jquery

    function selectIngredient(select)
    {
      var $ul = $(select).prev('ul');

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

当我运行这个 html 和 jquery 时它不起作用。如果我选择它，它应该将另一种成分添加到列表中，但它不会发生。

【问题讨论】：

你在<h1>中有一个额外的<center>标签（顺便说一句，现在不推荐使用）

标签： jquery html jquery-ui jquery-mobile jquery-selectors

【解决方案1】：

我想在这里：

$(select).find('option[selected]').text()

你的意思是这样的：

$(select).find('option:selected').text()

但是为什么不再使用$(select).val() 呢？在您的 HTML 中，文本和值是一样的。

【讨论】：

根据你所说的更改，最后会是什么样子？
$ul.append('<li onclick="$(this).remove();">' + '<input type="hidden" name="ingredients[]" value="' + $(select).val() + '" /> ' + $(select).val() + '</li>');
我不明白你能看到我刚刚上传的图片。
@JuanCarlos 对不起，但我不明白你不明白什么。如果您按照我所说的那样更改代码，它应该看起来就像您发布的图片一样。
@JuanCarlos 对不起，如果这很苛刻，但请查看您自己的代码并查看我的答案中的代码。我告诉过你代码的哪一部分应该被替换，以及它应该被替换成什么。如果您自己无法弄清楚，恐怕您在错误的网站上提问。

【解决方案2】：

jsBin demo

（纯化的）HTML

<h1>INGREDIENTES</h1>
<ul>
 <li>
  <input type="hidden" name="ingredients[]" value="Cheese" />
  Cheese
 </li>
 <li>
  <input type="hidden" name="ingredients[]" value="Ham" />
  Ham
 </li>
</ul>


<select>
 <option value="Cheese">Cheese</option>
 <option value="Olives">Olives</option>
 <option value="Pepperoni">Pepperoni</option>
 <option value="Milk">Milk</option>
</select>

（好笑）jQ

function selectIngredient(select){
      
      var selVal = $(select).val();
      var $ul    = $(select).prev('ul');
      var exists = $ul.find('input[value=' + selVal +']').length;
  
      if ( !exists ){        
          $ul.append('<li>' +
          '<input type="hidden" name="ingredients[]" value="' + selVal + '" /> ' +
          selVal + '</li>');        
      }
}


$('ul').on('click','li',function(){
   $(this).remove();
});

$('select').change(function(){
   selectIngredient(this);
});

如果你喜欢它更有条理，你可以使用：

    var input = $('<input />',{
          type : 'hidden',
          name : 'ingredients[]',
          value: selVal
    });
    $('<li />', { text: selVal }).prepend( input ).appendTo( $ul );

【讨论】：

@JuanCarlos 不客气。在演示中它可以工作；如果您有任何问题，请随时提出。