javascript 重置多选选项

b1uwtaje  于 2023-08-02  发布在  Java
关注(0)|答案(4)|浏览(125)

所以我在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>


举一个例子。如果用户选择“家庭电话”,则会基于该选择出现另一个下拉列表,然后他们可以在其中选择某些内容。但是,如果用户改变主意并且想要做比如智能电话,则针对家庭电话打开的选择框然后消失并且针对智能电话的新选择框出现。但是他们为众议院电话选择的选项,现在已经消失了,仍然被选中,并将被张贴。我想重置所有值的基础上,html上面的选择,然后应该确保只有正确的选项被张贴,没有额外的。我发现的例子似乎与我所拥有的不一致。
谢啦,谢啦

0aydgbwb

0aydgbwb1#

您可以使用此功能重置您的选择:

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


这将保存你的代码,也将帮助你使你的代码美观。:)

zpjtge22

zpjtge222#

要清除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/

nwlqm0z1

nwlqm0z13#

  • 嘿先生. 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);
  }
}

wqsoz72f

wqsoz72f4#

所以我终于想明白了。男人什么痛苦!以下是最终对我起作用的东西,让它像我希望的那样工作:

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

    });

字符串

相关问题