jquery - 在 JQuery 中的数组中搜索数组

Question

您可以在此处查看/测试指向该页面的直接链接:Search Page Here

我有以下 JQuery:
$(函数() { $('input[type=radio]').click(function() { var r_id = $("input[@name=sc]:checked").attr('id'); //警报(r_id)；

        if (r_id == "bName") {
            //enable By Name drop down
            $(".dName").prop('disabled', false);
            //disable By Specialty and By Status drop down
            $(".dSpecialty").prop('disabled', true);
            $(".dStatus").prop('disabled', true);
        }
        if (r_id == "bSpecialty") {
            //enable By Specialty drop down
            $(".dSpecialty").prop('disabled', false);
            //disable By Name and By Status drop down
            $(".dName").prop('disabled', true);
            $(".dStatus").prop('disabled', true);
        }
        if (r_id == "bStatus") {
            //enable By Status drop down
            $(".dStatus").prop('disabled', false);
            //disable By Name and By Specialty drop down
            $(".dName").prop('disabled', true);
            $(".dSpecialty").prop('disabled', true);
        }
    });
    $('.sButton').click(function() {
        var dNameVal = $(".dName").val();
        var dSpecialtyVal = $(".dSpecialty").val();
        var dStatusVal = $(".dStatus").val();
        if ((dNameVal != "#" && $('.dName').is(':enabled')) || (dSpecialtyVal != "#" && $('.dSpecialty').is(':enabled')) || (dStatusVal != "#" && $('.dStatus').is(':enabled'))) {
            //alert ("good");
            $('.displayresult').css('display','block');

            if ($('.dName').is(':enabled')) {
                document.getElementById('first').innerHTML = phyList[$(".dName").find('option:selected').attr('id')].firstName;
                document.getElementById('last').innerHTML = phyList[$(".dName").find('option:selected').attr('id')].lastName;
                document.getElementById('status').innerHTML = phyList[$(".dName").find('option:selected').attr('id')].status;
                document.getElementById('specialty').innerHTML = phyList[$(".dName").find('option:selected').attr('id')].specialty;
                document.getElementById('address').innerHTML = phyList[$(".dName").find('option:selected').attr('id')].address;
                document.getElementById('phone').innerHTML = phyList[$(".dName").find('option:selected').attr('id')].phone;
            }
            if ($('.dSpecialty').is(':enabled')) {
                var fname = "";
                var lname = "";
                var stats = "";
                var spec = "";
                var addr = "";
                var phonen = "";
                for (test=0;test<=phyList.length-1;test++) {
                    i = phyList[test].specialty; //get all specialty in the array
                    //alert(i); //test alert
                    if (i == $(".dSpecialty").find('option:selected').attr('id')) { //if what's in the phyList array matches selection
                        fname = fname + phyList[test].firstName + "<br>";
                        lname = lname + phyList[test].lastName + "<br>";
                        stats = stats + phyList[test].status + "<br>";
                        spec = spec + phyList[test].specialty + "<br>";
                        addr = addr + phyList[test].address + "<br>";
                        phonen = phonen + phyList[test].phone + "<br>";

                        document.getElementById('first').innerHTML = fname;
                        document.getElementById('last').innerHTML = lname;
                        document.getElementById('status').innerHTML = stats;
                        document.getElementById('specialty').innerHTML = spec;
                        document.getElementById('address').innerHTML = addr;
                        document.getElementById('phone').innerHTML = phonen;
                        //alert ("ok");
                    }
                }
            }
            if ($('.dStatus').is(':enabled')) {
                var fname = "";
                var lname = "";
                var stats = "";
                var spec = "";
                var addr = "";
                var phonen = "";
                for (test=0;test<=phyList.length-1;test++) {
                    i = phyList[test].status; //get all specialty in the array
                    //alert(i); //test alert
                    if (i == $(".dStatus").find('option:selected').attr('id')) { //if what's in the phyList array matches selection
                        fname = fname + phyList[test].firstName + "<br>";
                        lname = lname + phyList[test].lastName + "<br>";
                        stats = stats + phyList[test].status + "<br>";
                        spec = spec + phyList[test].specialty + "<br>";
                        addr = addr + phyList[test].address + "<br>";
                        phonen = phonen + phyList[test].phone + "<br>";

                        document.getElementById('first').innerHTML = fname;
                        document.getElementById('last').innerHTML = lname;
                        document.getElementById('status').innerHTML = stats;
                        document.getElementById('specialty').innerHTML = spec;
                        document.getElementById('address').innerHTML = addr;
                        document.getElementById('phone').innerHTML = phonen;
                        //alert ("ok");
                        document.getElementById('errorst').innerHTML = "";
                    }
                    else {
                        document.getElementById('errorst').innerHTML = "<i>No match found</i>";
                    }
                }
            }
        }
        else {
            alert ("not good");
            //display the last successful result search
        }
    });
});

以下 HTML 代码:

<table border=0 cellPadding=10 cellSpacing=10>
    <tr>
        <td><input type=radio name=sc id=bName class=searchCriteria checked /> By Name:</td>
        <td>
            <select class="dName" name="dName">
                <option SELECTED value="#" DISABLED>========================</option>
                <option id="0" value="amensah">Abbey-Mensah, Michael</option>
                <option id="1" value="acharya">Acharya, Niraj</option>
                <option id="2" value="achonu">Achonu, Geoffrey C.</option>
                <option id="3" value="agustin">Agustin, Erie</option>
                <option id="4" value="agyemang">Agyemang, Kuragu</option>
                <option id="5" value="jahmed">Ahmed, Jahid</option>
                <option id="6" value="fahmad">Ahmad, Faqir</option>
            </select>
        </td>
        <td><span id="errorna"></span></td>
    </tr>
    <tr>
        <td><input type=radio name=sc id=bSpecialty class=searchCriteria /> By Specialty:</td>
        <td>
            <select class="dSpecialty" name="dSpecialty" DISABLED>
                <option SELECTED value="#" DISABLED>========================</option>
                <option id="Anesthesiology" value="Anesthesiology">Anesthesiology</option>
                <option id="Cardiovascular Disease" value="Cardiovascular Disease">Cardiovascular Disease</option>
                <option id="Dentistry" value="Dentistry">Dentistry</option>
                <option id="Dermatology" value="Dermatology">Dermatology</option>
                <option id="Emergency Medicine" value="Emergency Medicine">Emergency Medicine</option>
                <option id="Family Practice" value="Family Practice">Family Practice</option>
                <option id="Gastroenterology" value="Gastroenterology">Gastroenterology</option>
                <option id="Geriatric Medicine" value="Geriatric Medicine">Geriatric Medicine</option>
                <option id="Hematology" value="Hematology">Hematology</option>
                <option id="Internal Medicine" value="Internal Medicine">Internal Medicine</option>
                <option id="Interventional Cardiology" value="Interventional Cardiology">Interventional Cardiology</option>
                <option id="Medicine" value="Medicine">Medicine</option>
                <option id="Obstetrics" value="Obstetrics">Obstetrics</option>
                <option id="Oral & Maxillofacial Surgery" value="Oral & Maxillofacial Surgery">Oral & Maxillofacial Surgery</option>
                <option id="Orthopedic Surgery" value="Orthopedic Surgery">Orthopedic Surgery</option>
                <option id="Otolaryngology" value="Otolaryngology">Otolaryngology</option>
                <option id="Pathology" value="Pathology">Pathology</option>
                <option id="Pediatrics" value="Pediatrics">Pediatrics</option>
                <option id="Physical Medicine & Rehab" value="Physical Medicine & Rehab">Physical Medicine & Rehab</option>
                <option id="Plastic Surgery" value="Plastic Surgery">Plastic Surgery</option>
                <option id="Podiatry" value="Podiatry">Podiatry</option>
                <option id="Psychiatry" value="Psychiatry">Psychiatry</option>
                <option id="Psychotherapy" value="Psychotherapy">Psychotherapy</option>
                <option id="Pulmonary Medicine" value="Pulmonary Medicine">Pulmonary Medicine</option>
                <option id="Rad. Nuclear Medicine" value="Rad. Nuclear Medicine">Rad. Nuclear Medicine</option>
                <option id="Radiology" value="Radiology">Radiology</option>
                <option id="Surgery" value="Surgery">Surgery</option>
                <option id="Urology" value="Urology">Urology</option>
                <option id="Vascular" value="Vascular">Vascular</option>
            </select>
        </td>
        <td><span id="errorsp"></span></td>
    </tr>
    <tr>
        <td><input type=radio name=sc id=bStatus class=searchCriteria /> By Status:</td>
        <td>
            <select class="dStatus" name="dStatus" DISABLED>
                <option SELECTED value="#" DISABLED>========================</option>
                <option id="Active" value="active">Active</option>
                <option id="Allied Health Staff" value="allied">Allied Health Staff</option>
                <option id="Consulting" value="consulting">Consulting</option>
                <option id="Courtesy" value="courtesy">Courtesy</option>
                <option id="Leave of Absence" value="loa">Leave of Absence</option>
                <option id="Primary Provider" value="primary">Primary Provider</option>
                <option id="Provisional" value="provisional">Provisional</option>
            </select>
        </td>
        <td><span id="errorst"></span></td>
    </tr>
    <tr>
        <td colSpan=2 align=right><input type=button value="Search" class="sButton" name="sButton" /></td>
    </tr>
</table>

<div class=displayresult>
    <table border=0 cellPadding=0 cellSpacing=0 width=100%>
        <tr>
            <td>First Name</td>
            <td>Last Name</td>
            <td>Status</td>
            <td>Specialty</td>
            <td>Address</td>
            <td>Phone Number</td>
        </tr>
        <tr>
            <td class="first" id="first" name="first"></td>
            <td class="last" id="last" name="last"></td>
            <td class="status" id="status" name="status"></td>
            <td class="specialty" id="specialty" name="specialty"></td>
            <td class="address" id="address" name="address"></td>
            <td class="phone" id="phone" name="phone"></td>
        </tr>
    </table>
</div>

以下 CSS 代码:

.displayresult {
    display: none;
}

现在如果你检查 JS 代码，下面的 Doctor 有多个专业:

...
{
"firstName": "Ahmad",
"lastName": "Faqir",
"status": "Provisional",
"specialty": ["Internal Medicine", "Pediatrics"],
"address": "test test, Brooklyn NY 11218",
"phone": "456.673.4389"
}
...

当用户选择“内科”或“儿科”作为专业时，如何更改 JQuery 函数以确保他出现在两个选项中？

此外，以下 JS 不工作:

...
                if (i == $(".dStatus").find('option:selected').attr('id')) { //if what's in the phyList array matches selection
                    fname = fname + phyList[test].firstName + "<br>";
                    lname = lname + phyList[test].lastName + "<br>";
                    stats = stats + phyList[test].status + "<br>";
                    spec = spec + phyList[test].specialty + "<br>";
                    addr = addr + phyList[test].address + "<br>";
                    phonen = phonen + phyList[test].phone + "<br>";

                    document.getElementById('first').innerHTML = fname;
                    document.getElementById('last').innerHTML = lname;
                    document.getElementById('status').innerHTML = stats;
                    document.getElementById('specialty').innerHTML = spec;
                    document.getElementById('address').innerHTML = addr;
                    document.getElementById('phone').innerHTML = phonen;
                    //alert ("ok");
                    document.getElementById('errorst').innerHTML = "";
                }
                else {
                    document.getElementById('errorst').innerHTML = "<i>No match found</i>";
                }
            }
...

无论是否找到匹配项，它始终显示未找到匹配项消息。

如何才能让它只在找不到匹配项时显示消息？

Answer 1

您可能遇到问题的原因是您从未声明 i。你的 for 循环应该像这样开始:

for (test=0;test<=phyList.length-1;test++) {
   var i = phyList[test].specialty; //get all specialty in the array

如果有多个专业，这将为您提供一个数组，因此您应该使用第二个 for 循环来遍历您的专业。

for ( var iVar; iVar < i.length; iVar++ )
{
    if (i[iVar] == $(".dStatus").find('option:selected').attr('id')) { //if what's in the phyList array matches selection
        //code
    }
}

这应该检查每个医生的所有专业。

由于并非所有专业都作为数组添加，因此您需要在 for 循环之外包含原始 if 语句。这是一个有效的 jQuery:http://jsfiddle.net/k7jhq/