重置多选选项

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'));

这将节省你的代码，也将帮助你使你的代码变得漂亮。 :)

Answer 2

要清除select的选择，可以将属性selectedIndex设置为0，如下所示：

$('#select_form').prop('selectedIndex', 0);

编辑：

您可以根据第一个下拉值来命名分组容器（我假设有 div），例如使用“div-

house”作为第一组，依此类推。您还可以将这些 div 标记为具有通用的类名称，例如“select-group”。

像这样：

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

<div id="div-house" class="select-group">
    ....
</div>

<div id="div-nsp" class="select-group">
    ...
</div>

<div id="div-feedback" class="select-group">
    ...  
</div>

然后，你可以用简单的方式做到这一点，就像这样：

$(document).ready(function () {
    $(".select-group").hide();
});

function find_select()
{
    // Hide all the dynamic divs
    $(".select-group").hide();
    // Clear the selection of ALL the dropdowns below ALL the "select-group" divs.
    $(".select-group").find('option:selected').removeAttr('selected');
    var select = $("#select_form");
    if (select.val() > 0)
    {
        // Show the div needed
        var idSelected = select.find('option:selected').attr('id');
        $("#div-" + idSelected).show();
    }
}

此处的工作示例：

http://jsfiddle.net/9pBCX/

Answer 3

嘿，技术先生，我的时间不多了，但我想与您分享一些内容，这些内容可以让您对您想要实现的控制逻辑有非常清晰和简洁的了解。您需要做一些工作，因为这些是我在过去创建的非常基本的 cookie。尝试理解并围绕此创建逻辑，我希望这会有所帮助。谢谢。

这里有两个简单的例子。您可以查看 jquery 文档以获取适合您需求的正确属性。

[示例1：]

http://jsfiddle.net/Superman/X4ykC/embedded/result/

//enable disable button on decision checkbox.
$(function() {
    $('#agree').change(function() {
        $('#submit').attr('disabled', !this.checked);
    });
});

[示例2：]

http://jsfiddle.net/Superman/XZM5r/embedded/result/

//enable disable controls on checkbox

$(function() {
  enable_cb();
  $("#group1").click(enable_cb);
});

function enable_cb() {
  if (this.checked) {
    $("input.group1").removeAttr("disabled");
  } else {
    $("input.group1").attr("disabled", true);
  }
}

Answer 4

所以我终于明白了。男人多么痛苦啊！这就是最终对我有用的方法，让它按照我想要的方式工作：

        // For the drop down switches   
    $(function(){
        $('#phone_type').change(function(){
            $('#call_types option[value=""]').attr('selected','selected');
            $('#pre_alerts option[value=""]').attr('selected','selected');
            $('#pre_alerts_types option[value=""]').attr('selected','selected');
            $('#alert_type option[value=""]').attr('selected','selected');
         // Because one box is being stupid, we set the display to none
            document.getElementById('pre_alerts_yes_form').style.display = 'none';
        });

    });

Answer 5

我知道自从提出这个问题以来已经有一段时间了，但这里有另一个要添加的解决方案。

在这里查看答案

重置多选选项

问题描述投票：0回答：5

5个回答

最新问题

重置多选选项

问题描述 投票：0回答：5

5个回答

最新问题

问题描述投票：0回答：5