1

選択したラジオボタンに基づいてドロップダウン オプションをフィルタリングしようとしています。フィルタリングは正常に行われていますが、問題は、フィルタリングが発生した後も最初の要素がまだ表示されていることです。

デモを確認してください: 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();

    });
});
4

5 に答える 5

3

編集: クロスブラウザー ソリューションを作成するには、実際にオプションを移動する必要があります。

他の誰かがすでに元の質問を解決しているので、これを将来の読者にとってより便利にするために、選択の一般的なバージョンを次に示します (パイプ区切りではなくデータ属性を使用)。この 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

于 2013-08-22T09:38:00.007 に答える
0

1 つの解決策は、オプションを表示/非表示にした後に、選択した値を設定することです。

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

于 2013-08-22T09:08:40.333 に答える
0

次のように、フィドルで一致したオプション要素のプロパティを更新しました

$('#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% を達成しています。

于 2013-08-22T09:05:52.670 に答える
-1

デモを見る 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();


});
于 2013-08-22T09:08:06.870 に答える