Как установить индекс выпадающего списка ASP.net на 0 из внешнего интерфейса

У меня есть следующий код на странице ASP.net:

<asp:DropDownList ClientIDMode="Static" ID="ddl1" CssClass="chosen-select le" runat="server" AppendDataBoundItems="true"></asp:DropDownList>
<asp:DropDownList ClientIDMode="Static" ID="ddl2" CssClass="chosen-select le" runat="server" AppendDataBoundItems="true"></asp:DropDownList>
<asp:DropDownList ClientIDMode="Static" ID="ddl3" CssClass="chosen-select le" runat="server" AppendDataBoundItems="true"></asp:DropDownList>

<input type="button" id="ClearForm" value="Clear" class="btn1" />

JQuery, чтобы установить индекс на 0 для всех трех раскрывающихся списков:

$(function () {
    $("body").on("click", "#ClearForm", function (e) {
        e.preventDefault();
        $("select#ddl1, select#ddl2, select#ddl3").prop('selectedIndex', 0); //does not set the selected index to 0
        alert($("select#ddl1").text()); //displays all the options from #ddl1
    });
});

Как я могу изменить, чтобы индекс выпадающего списка был установлен на 0.

HTML-рендеринг первого раскрывающегося списка:

<select name="ctl00$BodyPlaceHolder$ddl1" id="ddl1" class="le">
    <option value="Select a State">Select a State</option>
    <option value="Alabama">AL</option>
    <option value="Alaska">AK</option>
    <option value="Arizona">AZ</option>
</select>

Я пробовал следующий JQuery, и он возвращает null:

alert($("select#ddl1").val());

Также попробовал следующее, и это не сработало:

$('select').each(function () {
    $(this).find('option:first').prop('selected', 'selected');
});

Добавлен следующий JavaScript:

function setSelectedIndex(dropdownlist, selVal) {
    var ddl1 = document.getElementById(dropdownlist);
    alert(ddl1.selectedIndex);
    if (ddl1.length >= selVal) { //if the selected value is greater then 0, the alert is shown but the value is not set back to 0.
        ddl1.selectedIndex = selVal;
        alert("greater or equal");
    }
    else {
        alert("not greater or equal");
    }
}

Похоже, если я удалю выбранный Jquery, он будет работать нормально: http://jsfiddle.net/bpbvhsay/


html jquery asp.net jquery-chosen
person SearchForKnowledge    schedule 15.04.2015    source источник
comment
ты хочешь $('...').val(0)   -  person DLeh    schedule 15.04.2015
comment
Я не думаю, что ddl1 и т. д. - это фактический идентификатор клиента. Разместите обработанный HTML   -  person DLeh    schedule 15.04.2015
comment
Попробуйте alert($("select#ddl1").val());   -  person Sudharsan S    schedule 15.04.2015
comment
"правильный" способ - напрямую сослаться на него: $('#<%= ddl1.ClientID %>').val(0)   -  person DLeh    schedule 15.04.2015
comment
Попробуйте: document.getElementById('ddl2').selectedIndex = 0;   -  person Chase Ernst    schedule 15.04.2015
comment
Я использую ClientIDMode="Static", который устанавливает идентификатор HTML в элемент DropDownList.   -  person SearchForKnowledge    schedule 15.04.2015
comment
Обновил мой вопрос с помощью рендеринга HTML и JQuery, и он продолжает возвращать null. Я хотел сделать что-то рекурсивное, поэтому с одной строкой для всего раскрывающегося списка по умолчанию установлено значение 0.   -  person SearchForKnowledge    schedule 15.04.2015

Ответы (2)


arrow_upward
1
arrow_downward

Есть много способов сделать это, но вот решение с помощью JavaScript:

function setSelectedIndex(dropdownlist, selVal)
    var ddl1 = document.getElementById(dropdownlist);
    //alert(ddl1.selectedIndex); //displays the proper index...
    if(ddl1.length >= selVal)
    {
       ddl1.selectedIndex = selVal;
    }
}

Вызовите указанную выше функцию в соответствии с вашими требованиями, как показано ниже:

setSelectedIndex('<%=ddl1.ClientID %>', 2);

ОБНОВЛЕНИЕ. Как вы сказали, вы уже установили ClientIDMode, попробуйте следующую обновленную функцию:

function setSelectedIndex(selVal){
    var ddl1 = document.getElementById('ddl1');
    if(ddl1.length >= selVal)
    {
       ddl1.selectedIndex = selVal;
    }
}

и назовите его так:

setSelectedIndex(0);
person immayankmodi    schedule 15.04.2015
comment
Мне не нужно использовать ddl1.ClientID, потому что я использую ClientIDMode, но я протестирую ваш код. Спасибо. Обновил ваш код, чтобы показать мне проблему. - person SearchForKnowledge; 15.04.2015
comment
Ахххххххххххх Я вижу, что происходит. Я использую выбранный JQuery для оформления своего раскрывающегося списка. Если я удалю, он работает: / Скорее всего, выбранный мешает ему. - person SearchForKnowledge; 15.04.2015

arrow_upward
1
arrow_downward

Я использовал Chosen JQuery, из-за которого раскрывающийся список не обновлялся.

Это HTML:

<select name="ctl00$BodyPlaceHolder$ddl1" id="ddl1" class="chose-select le">
    <option value="Select a State">Select a State</option>
    <option value="Alabama">AL</option>
    <option value="Alaska">AK</option>
    <option value="Arizona">AZ</option>
</select>

JavaScript, который устанавливает для выбранного индекса значение 0:

function setSelectedIndex(dropdownlist, selVal) {
    var ddl1 = document.getElementById(dropdownlist);
    if (selVal < ddl1.selectedIndex) {
        ddl1.selectedIndex = selVal;

        $(ddl1).val(0).trigger('chosen:updated');
    }
}

Это трюк.

person SearchForKnowledge    schedule 15.04.2015
comment
Вам следует задать другой вопрос. Не задавайте вопросы, размещая в качестве ответа. Если вопрос похож, то связывайте друг друга. - person immayankmodi; 15.04.2015
comment
@MMTac stackoverflow.com/questions/29656711/ Спасибо. - person SearchForKnowledge; 15.04.2015