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

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')将带回与option 匹配的#ddlAllTemplates的所有同级

在查看之前答案的演示时，我有点困惑，因为它们都不起作用。因此，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浏览器仍将数据发送到表单）

我还保留了相同的"value"属性，因为在这些值中并没有真正的唯一ID，但我可能会使用与数据库的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'); 
    });
});

我已经更新了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%。

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

$('#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/

请参阅演示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();

});