
Add/remove select list items
By: a guest on
Jun 11th, 2012 | syntax:
HTML | size: 1.59 KB | hits: 26 | expires: Never
<html>
<head>
<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title>Js Tests</title>
</head>
<body>
<fieldset>
<legend>Pergunta 1</legend>
<input type="radio" name="answer[1]" value="1" /> Test 1
<input type="radio" name="answer[1]" value="2" /> Test 2
<input type="radio" name="answer[1]" value="3" /> Test 3
<input type="radio" name="answer[1]" value="4" /> Test 4
</fieldset>
<fieldset>
<legend>Pergunta 2</legend>
<input type="checkbox" name="answer[2]" value="1" /> Test 1
<input type="checkbox" name="answer[2]" value="2" /> Test 2
<input type="checkbox" name="answer[2]" value="3" /> Test 3
<input type="checkbox" name="answer[2]" value="4" /> Test 4
</fieldset>
<fieldset>
<legend>Select-list</legend>
<select name="select-test" id="our-select">
<option value="0">No value</option>
</select>
</fieldset>
<script type="text/javascript">
(function($){
$(':radio, :checkbox').on('click', function(){
var $this = $(this), value = $this.val(), label = $this.attr('name') + value;
var add = function(){
var option = ['<option value="', value, '">', label, '</option>'];
$('#our-select').append(option.join(''));
};
var remove = function(){
var option = $('#our-select').find('option[value="' + value + '"]');
if(typeof option !== 'undefined'){
option.remove();
}
};
$this.is(':checked')? add() : remove();
});
})(jQuery);
</script>
</body>
</html>