Question

我正在尝试根据所选的单选按钮过滤下拉选项。过滤发生得很好，但问题是，在过滤发生后，第一个元素仍在显示。

查看演示：http://jsfiddle.net/animeshb/7Wqfj/

<div id="step1">
    <input class="radiobutton" dataval="PAT" name="TemplateTypes" type="radio" />
    <div>Patient</div>
    <input class="radiobutton" dataval="EMPLOYEE" name="TemplateTypes" type="radio" />
    <div>Employee</div>
    <input class="radiobutton" dataval="MACHINE" name="TemplateTypes" type="radio" />
    <div>Machine</div>
    <select class="selectLDlist" id="ddlAllTemplates" name="AllTemplates">
        <option value="77492|ET_07|EMPLOYEE|08/16/13|08/16/14|Approved|Y|70744">EMPLOYEE</option>
        <option value="70470|testing|PAT|08/16/13|08/16/14|Approved|Y|70428">Patient</option>
        <option value="70472|testing|PAT|08/12/13|08/16/14|Approved|Y|30213">Patient</option>
        <option value="70472|testing|EMPLOYEE|08/13/13|08/16/14|Approved|Y|30213">EMPLOYEE</option>
        <option value="70472|testing|PAT|08/14/13|08/16/14|Approved|Y|30213">Patient</option>
        <option value="70472|testing|MACHINE|08/14/13|08/16/14|Approved|Y|30213">MACHINE</option>
        <option value="70472|testing|PAT|08/14/13|08/16/14|Approved|Y|30213">Patient</option>
    </select>
</div>

和jQuery：

$('.radiobutton').change(function () {
    var templateType = $("#step1 input:radio[class=radiobutton]:checked").attr("dataval");

    var ddlAllTemplates = $('#ddlAllTemplates');
    var options = ddlAllTemplates.find('option');

    $('#ddlAllTemplates option').each(function () {

        var extract = $(this).attr('value').split('|')[2];
        if (extract == templateType) $(this).show();
        else $(this).hide();

    });
});

Answer 1

编辑：要创建跨浏览器解决方案，您必须移动选项

其他人已经解决了原始问题，以便对未来的读者更有用，这里是select的通用版本（使用数据属性而不是管道分隔）。这个jQuery不需要创建额外的隐藏选择，它只是将选项移动为目标选择的隐藏兄弟，并根据需要将它们移回。

http://jsfiddle.net/2msfH/

<div id="step1">
    <input class="radiobutton" data-type="PAT" name="TemplateTypes" type="radio" /><div>Patient</div>
    <input class="radiobutton" data-type="EMPLOYEE" name="TemplateTypes" type="radio" /><div>Employee</div>
    <input class="radiobutton" data-type="MACHINE" name="TemplateTypes" type="radio" /><div>Machine</div>
    <select class="selectLDlist" id="ddlAllTemplates" name="AllTemplates">
        <option value="77492" data-type="EMPLOYEE" data-date="08/16/13">EMPLOYEE</option>
        <option value="70470" data-type="PAT" data-date="08/16/13">Patient</option>
        <option value="70472" data-type="PAT" data-date="08/12/13">Patient</option>
        <option value="70472" data-type="EMPLOYEE" data-date="08/13/13">EMPLOYEE</option>
        <option value="70472" data-type="PAT" data-date="8/14/13">Patient</option>
        <option value="70472" data-type="MACHINE" data-date="08/14/13">MACHINE</option>
        <option value="70472" data-type="PAT" data-date="08/14/13">Patient</option>
    </select>
</div>

JQuery的：

$('.radiobutton').change(function () {
    var optionsToRemove = $('#ddlAllTemplates option[data-type!=' + $(this).data('type') + ']');
    var optionsToBringBack = $('#ddlAllTemplates ~ option[data-type=' + $(this).data('type') + ']');
    optionsToRemove.hide().insertAfter('#ddlAllTemplates');
    optionsToBringBack.show().appendTo('#ddlAllTemplates');
});

$('#ddlAllTemplates ~ option')会将#ddlAllTemplates匹配option

的所有兄弟姐妹带回来

Answer 2

在检查以前答案的演示时，我有点困惑，它们都没有奏效。所以Chrome（v29）似乎根本不喜欢在选择框上隐藏选项。它可能是一个chrome本身的错误或者无论如何我想尝试并解决它上面的问题。

我的解决方法是让第二个“假”选项每次填充所需的选项，然后使用假选择来驱动真正的选择框。

理想情况下，应该隐藏真正的选择，但我保持它对于演示可见。我尝试在HTML上尽可能少地进行更改，因此大多数更改都在javascript中。

$(document).ready(function(){ // When the document is ready populates the fakelist
    $('#ddlAllTemplates option').each(function (index) {
        $(this).attr('id', 'option-'+index);
        $(this).clone().attr('value', this.id).appendTo('#fakelist'); 
    });
});

$('.radiobutton').change(function () {
    var found = false; // Need this for later to find the first matching option
    var templateType = $(this).attr("dataval");

    $('#fakelist').html(''); // Empty the fakelist

    $('#ddlAllTemplates option').each(function (index) {
        var extract = $(this).attr('value').split('|')[2];      

        if (extract == templateType) {
            // Clone and push the option on the fakelist
            $(this).clone().attr('value', this.id).appendTo('#fakelist'); 

            if (!found) {
                found = true;
                $(this).prop('selected',true);
            }

        }

    });
});

$('#fakelist').change(function () {
    // And select the appropriate ID using the value from the fakelist option.
    var selected = $(this).children('option:checked').attr('id');
    $('#'+selected).prop('selected',true);
});

以下是演示：http://jsfiddle.net/edYHT/

修改我已经用我个人的问题方法进行了演示，总是使用第二个选择框，但是在这个演示中，第二个选择框变为真实的，前一个只是数据源（在此时间可能我会建立一个AJAX脚本来从数据库中获取数据并在每次更改框时查询，可能会缓存数据。）

这允许将第二个框发送到表单并大大减少javascript（并允许非js broswers仍然将数据发送到表单）

我也保留了相同的“值”属性，因为值中没有真正的唯一ID，但我可能会使用与数据库中的唯一ID匹配。

最后但不是最后一次，适用于IE6及以上版本（经过测试），因此您的IE8不会有任何问题。

<强>标记：

<div id="form-step-1" class="form-step-single"> <label for="radio-patient"><input class="radiobutton" id="radio-patient" value="PAT" name="TemplateTypes" type="radio" /> Patient</label> <label for="radio-employee"><input class="radiobutton" id="radio-employee" value="EMPLOYEE" name="TemplateTypes" type="radio" /> Employee</label> <label for="radio-machine"><input class="radiobutton" id="radio-machine" value="MACHINE" name="TemplateTypes" type="radio" /> Machine</label> <select class="selectlist hidden" id="ddl-all-templates"> <option data-type="EMPLOYEE" value="77492|ET_07|EMPLOYEE|08/16/13|08/16/14|Approved|Y|70744">Jean Luc Picard</option> <option data-type="PAT" value="70470|testing|PAT|08/16/13|08/16/14|Approved|Y|70428">Flash Gordon</option> <option data-type="PAT" value="70472|testing|PAT|08/12/13|08/16/14|Approved|Y|30213">Jason Voorhees</option> <option data-type="EMPLOYEE" value="70472|testing|EMPLOYEE|08/13/13|08/16/14|Approved|Y|30213">Freddy Krueger</option> <option data-type="PAT" value="70472|testing|PAT|08/14/13|08/16/14|Approved|Y|30213">Darth Vader</option> <option data-type="MACHINE" value="70472|testing|MACHINE|08/14/13|08/16/14|Approved|Y|30213">ED209</option> <option data-type="PAT" value="70472|testing|PAT|08/14/13|08/16/14|Approved|Y|30213">Michael Knight</option> </select> <select class="selectlist" id="fakelist" name="AllTemplates"> <option data-type="EMPLOYEE" value="77492|ET_07|EMPLOYEE|08/16/13|08/16/14|Approved|Y|70744">Jean Luc Picard</option> <option data-type="PAT" value="70470|testing|PAT|08/16/13|08/16/14|Approved|Y|70428">Flash Gordon</option> <option data-type="PAT" value="70472|testing|PAT|08/12/13|08/16/14|Approved|Y|30213">Jason Voorhees</option> <option data-type="EMPLOYEE" value="70472|testing|EMPLOYEE|08/13/13|08/16/14|Approved|Y|30213">Freddy Krueger</option> <option data-type="PAT" value="70472|testing|PAT|08/14/13|08/16/14|Approved|Y|30213">Darth Vader</option> <option data-type="MACHINE" value="70472|testing|MACHINE|08/14/13|08/16/14|Approved|Y|30213">ED209</option> <option data-type="PAT" value="70472|testing|PAT|08/14/13|08/16/14|Approved|Y|30213">Michael Knight</option> </select> </div>

<强> JS：

$('.radiobutton').change(function () { var type = $(this).val(); $('#fakelist').html(''); $('#ddl-all-templates option').each(function (index) { if (type == $(this).attr('data-type')) $(this).clone().appendTo('#fakelist'); }); });

演示:) http://jsfiddle.net/B6nEs/

上次修改我保证： JS甚至可能更小：

$('.radiobutton').change(function () { $('#fakelist').html(''); $('#ddl-all-templates option[data-type="'+$(this).val()+'"]').each(function() { $(this).clone().appendTo('#fakelist'); }); });

Answer 3

我更新了fiddle中匹配的选项元素的属性，如下所示

$('#ddlAllTemplates option').each(function () {

    var extract = $(this).attr('value').split('|')[2];
    if (extract == templateType) 
        $(this).prop("selected",true); //Changed line of code
    else 
        $(this).hide();

});

现在，DDL根据所选的单选按钮选项显示值。你已经95％通过了样本。

Answer 4

一种解决方案是在显示/隐藏选项后设置所选值：

$('#ddlAllTemplates').val($("#ddlAllTemplates option:visible:first").val());

见编辑小提琴：http://jsfiddle.net/7Wqfj/24/

注意：这仅适用于Zac所说的Firefox。替代解决方案是：

$('.radiobutton').change(function () {
    var templateType = $("#step1 input:radio[class=radiobutton]:checked").attr("dataval");

    var ddlAllTemplates = $('#ddlAllTemplates');
    var options = ddlAllTemplates.find('option');

    var validOption = false;
    $('#ddlAllTemplates option').each(function () {
        var extract = $(this).attr('value').split('|')[2];
        if (extract == templateType) {
            $(this).show();
            validOption = $(this).val();
        }
        else $(this).hide();

    });

    $('#ddlAllTemplates').val(validOption);
});

http://jsfiddle.net/7Wqfj/26/

Answer 5

请参阅demo i think you want like this

$('.radiobutton').change(function () {
    var templateType = $("#step1 input:radio[class=radiobutton]:checked").attr("dataval");


    var ddlAllTemplates = $('#ddlAllTemplates');
    var options = ddlAllTemplates.find('option:contains('+templateType+')').val();


});

jQuery：过滤下拉列表仍显示过滤后的第一个元素

5 个答案: