ここでページへの直接リンクを表示/テストできます:検索ページはこちら
次の JQuery があります:
$(function() { $('input[type=radio]').click(function() { var r_id = $("input[@name=sc]:checked").attr( 'id'); //alert(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 コードを確認すると、次の医師には複数の専門分野があります。
...
{
"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>";
}
}
...
一致が見つかったかどうかに関係なく、一致が見つかりませんというメッセージが常に表示されます。
一致するものが見つからない場合にのみメッセージを表示するようにするにはどうすればよいですか?