这是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时它不起作用。如果我选择它,它应该把另一个成分放到列表中,但它不会发生。
答案 0 :(得分:3)
我想在这里:
$(select).find('option[selected]').text()
你实际上是这个意思:
$(select).find('option:selected').text()
但为什么不再使用$(select).val()
?在HTML上,文本和值都是一样的。
答案 1 :(得分:2)
(已纯化)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 );