编辑：

Question

所以我在javascript中使用了find_select（）函数，而我想要发生的是，当一个特定的选择选项被更改时，让它重置除第一个之外的所有其他可能的选择选项。这是该函数的代码片段以及我想重置其他所有内容的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>

作为一个例子，这是发生了什么。如果用户选择“家庭电话”，则会根据该选择显示另一个下拉菜单，然后他们可以选择其中的内容。但是，如果用户改变主意并想要说智能手机，那么为House Phone打开的选择框就会消失，并且会显示智能手机的新选择框。但他们选择的家庭电话的选项，现在已经消失，仍然被选中并将被发布。我想基于上面的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

嘿，Techie先生，我已经没时间了，但想和你分享一些东西，这可以让你对你想要实现的控制逻辑有一个非常清晰明了的想法。你需要解决一下，因为这些是我在时间上创建的非常基本的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';
        });

    });

重置多个选择选项

4 个答案:

编辑：