我有 jquery 代码将项目添加到选择框中。在将新项目添加到选择列表之前,我需要清除现有项目。我用的remove
方法。但它并没有删除这些项目。需要进行哪些更改才能使其正常工作?
jQuery
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnProgramDescriptionMagnifingLens").click(function () {
alert('Clicked');
var costPageDisplayText = 'A';
//REMOVE
var id = $('mtxtProgramDescription option').remove();
//ADD
var o = new Option(costPageDisplayText, 'B');
$(o).html(costPageDisplayText);
$("#mtxtProgramDescription").append(o);
});
});
</script>
CSS
<style type="text/css">
.floaterleft {
width: 300px;
height: 300px;
background-color: gray;
padding: 10px 10px 10px 10px;
}
</style>
HTML
<body>
<div class="floaterleft">
<div class="descriptionLeft">
<label for="Program___Description">Program / Description</label>
</div>
<div class="controlLeft">
<div class="partialFirstLine">
<div class="headerTextBox">
<input id="txtProgramDescription" class="searchTextbox" id="Program" name="Program" type="text" value="" />
</div>
<div class="Magenifyingbtn">
<img src="/Images/Lens2.png" id="btnProgramDescriptionMagnifingLens" class="Magenifyingbtn" />
</div>
</div>
<div class="partialSecondLine">
<select id="mtxtProgramDescription" name="mtxtProgramDescription" multiple="multiple" class="multiSelectCommon"></select>
</div>
</div>
</div>
<div class="floaterleft">
<div class="partLeft">
<div class="subLeft">
<div class="headerLabelPrintItem">
<label for="Print_Item">Print Item</label>
</div>
<div class="headerTextBoxPrintItem">
<select id="ddlPrintItem" name="ddlPrintItem">
<option value="Select">-- Select --</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="subLeft">
<div class="headerLabelPrintItem">
<label for="Order_Type">Order Type</label>
</div>
<div class="headerTextBoxPrintItem">
<select id="Select1" name="ddlPrintItem">
<option value="Select">-- Select --</option>
<option value="Direct">Direct</option>
<option value="Indirect">Indirect</option>
</select>
</div>
</div>
</div>
</div>
</body>