删除不适用于选择列表

时间:2013-09-06 15:29:18

标签: jquery

我有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>

2 个答案:

答案 0 :(得分:5)

您错过了ID选择器,请更改:

$('mtxtProgramDescription option')

$('#mtxtProgramDescription option')
//^^^ note the #

答案 1 :(得分:0)

你为什么这样做:

Change this :
var id = $('mtxtProgramDescription option').remove();
To:
$('#mtxtProgramDescription option').remove();