javascript - 重置多项选择选项

Question

所以我在 javascript 中使用 find_select() 函数，我希望发生的事情是，当特定的选择选项发生更改时，让它重置除第一个选项之外的所有其他可能的选择选项。这是该函数的代码片段以及我想重置其他所有内容的选择选项。

function find_select(){
if (document.getElementById("nsp").selected == true){

        if (document.getElementById("pre_alerts_yes").selected == true){
            document.getElementById('house_form').style.display = 'none';
            document.getElementById('nsp_form').style.display = 'block';
            document.getElementById('pre_alerts_yes_form').style.display = 'block';
            document.getElementById('feedback_form').style.display = 'none';
        }
        else{
            document.getElementById('house_form').style.display = 'none';
            document.getElementById('nsp_form').style.display = 'block';
            document.getElementById('feedback_form').style.display = 'none';
        }
}
else if (document.getElementById("feedback").selected == true)
{
    document.getElementById('house_form').style.display = 'none';
    document.getElementById('nsp_form').style.display = 'none';
    document.getElementById('feedback_form').style.display = 'block';
}
else if (document.getElementById("house").selected == true)
{
    document.getElementById('house_form').style.display = 'block';
    document.getElementById('nsp_form').style.display = 'none';
    document.getElementById('feedback_form').style.display = 'none';
}   
else{
    document.getElementById('house_form').style.display = 'none';
    document.getElementById('nsp_form').style.display = 'none';
    document.getElementById('feedback_form').style.display = 'none';
}
}

和html代码:

 <label for="input_title">Phone Type:</label>
 <select name="phone_type" id="select_form" class="input-block-level" onchange="find_select()">
   <option id="blank" value="blank"></option>
   <option id="house" value="1">House Phone</option>
   <option id="nsp" value="2">Normal Cell (Non Smart Phone)</option>
       <option id="feedback" value="3">SmartPhone</option>
 </select>

作为发生的事情的一个例子是这样的。如果用户选择“家庭电话”，则会根据该选择出现另一个下拉菜单，然后他们可以在其中选择内容。但是，如果用户改变主意并想说智能电话，则为家庭电话打开的选择框就会消失，并会出现新的智能电话选择框。但是他们为家庭电话选择的选项现在已经消失，但仍处于选中状态并将发布。我想根据上面的 html 重置所有值以进行选择，然后应该确保只发布正确的选项，没有任何额外的内容。我发现的示例似乎无法与我的示例结合使用。

谢谢

Answer 1

你可以使用这个函数来重置你的选择:

function resetSelectElement(selectElement) {
    var options = selectElement.options;

    // Look for a default selected option
    for (var i=0, iLen=options.length; i<iLen; i++) {

        if (options[i].defaultSelected) {
            selectElement.selectedIndex = i;
            return;
        }
    }

    // If no option is the default, select first or none as appropriate
    selectElement.selectedIndex = 0; // or -1 for no option selected
}

现在使用函数重置它:

resetSelectElement(document.getElementById('house_form'));

你完成了!

---

提示:我可以看到您在代码中多次使用 document.getElementById()。如果你不想使用 jQuery，通过 Id 选择元素，你可以创建一个像这样的函数来多次使用它:

function GE(el){
    return document.getElementById(el);
}

然后您可以在您的代码中多次使用它，例如:

resetSelectElement(GE('house_form'));

这将节省您的代码，还可以帮助您使代码更漂亮。 :)