Question

我试图在隐藏时重置下拉值。当用户重新选择零时，我隐藏了下拉。隐藏代码是成功运作的，如下所示 - ：

if(child_num == 0){
    var e = document.getElementById("child1_age3");
    if(e.style.display == 'block')
        e.style.display = 'none';
    else
        e.style.display = 'none';

    var e = document.getElementById("child1_age2");
    if(e.style.display == 'block')
        e.style.display = 'none';
    else
        e.style.display = 'none';

    var e = document.getElementById("child1_age1");
    if(e.style.display == 'block')
        e.style.display = 'none';
    else
        e.style.display = 'none';
}

重置下拉值的代码，它不起作用。

// clear input on hide
document.getElementById('child1_age1').options.length = 0;

或

// clear input on hide
document.getElementById("child1_age1").selectedIndex = -1;

我尝试了两种方式，但未能重置。请建议我如何重置此下拉值。

Answer 1

这可能无法解决实际问题，但如果您只是将if / else设置为display，那么确实不需要这些'none'语句if(child_num == 0){ document.getElementById("child1_age3").style.display = 'none'; document.getElementById("child1_age2").style.display = 'none'; document.getElementById("child1_age1").style.display = 'none'; }任何方式。

完全与您问题中的代码相同：

{{1}}

Answer 2

尝试以下代码重置选择零索引的下拉列表：

HTML

<select id="dropDown">
    <option value="0">SELECT</option>
    <option value="1">CAT</option>
    <option value="2">DOG</option>
    <option value="3">COW</option> </select>

的JavaScript

$(document).ready(function(){
    $("#dropDown").change(function(){
        var selectedIndex = this.selectedIndex;
        //if the first element is selected again
        if(selectedIndex === 0){
            $("#dropDown").html("");
            $("#dropDown").append('<option value="0">SELECT</option>');
        }
    });
});

Answer 3

您可以使用以下代码设置下拉值：

var dropDownEle = document.getElementById("dropDownID").options;

    for (var i=0; i < dropDownEle.length; i++) 
    {
        if(dropDownEle[i].value == 'ValueYouWantToSelect');
            dropDownEle[i].selected=true;
    }

希望它有所帮助！

Answer 4

假设通过重置你的意思是选择第一个＆lt;选项＆gt;在＆lt; select＆gt;中：

var selectElement = document.querySelector("select");
selectElement.item(0).selected = true;

你也可以像这样使用document.getElementById：

var selectElement = document.getElementById("child1_age3");
selectElement.item(0).selected = true;

item的HTMLSelectElement（）函数获取一个索引值，并为您提供该索引内容的单HTMLOptionElement表示。 HTMLOptionElement有一个selected属性，只需将其设置为true。

如果您想尝试一下，请查看此处：http://jsfiddle.net/kcguj6qh/

如何重置hide上的下拉值？

4 个答案: