好的就是:需要过滤掉重复项并删除添加值到SELECT框的功能。
Number: <input type="text" name="number" />
<br />
<!-- Clicking the button should add an option w/ the value being the text displayed -->
<button type="button">Add</button>
<br />
<Select id="mySelect" size="9"></Select>
<br />
<!-- Display only if SELECT box has a value -->
<button type="button" hidden="hidden">Remove</button>
我看过this thread但仍遗漏了一些东西。
答案 0 :(得分:1)
我不太确定你在问什么,所以澄清会有所帮助。这是我对你所寻找的内容的抨击:
<强>的Javascript 强>
<script type="text/javascript" charset="utf-8">
$( function() {
// Add number from <input> as an <option> to the <select>
$('#add_number').click( function() {
// Get Number from <input>
var numberToAdd = $('#number_to_add').val();
// Make sure it's not a duplicate; if so, don't add
var match = false;
$('#mySelect option').each( function() {
if (numberToAdd == this.value) match = true;
});
if (match) return false;
// Add the number to the <select>
$('#mySelect').append(
$('<option></option>').html(numberToAdd).val(numberToAdd)
);
// Show the remove button
$('#remove_selected').show();
return false;
});
// Remove the currently selected <option> in the <select>
$('#remove_selected').click( function() {
$('#mySelect option:selected').remove();
return false;
});
})
</script>
<强> HTML 强>
<form action="#">
<p>
Number: <input type="text" name="number_to_add" id="number_to_add" />
<button id="add_number" type="button">Add</button>
</p>
<p>
<select id="mySelect" size="9"></select>
<button id="remove_selected" type="button" style="display:none;">Remove</button>
</p>
</form>