我目前正在为癌症调查建立一个表系统，并且遇到了关于新表行上的多选过滤器的问题。请参阅下面的示例。
当选择淋巴瘤，白血病和其他时，我希望该表使用jquery创建一个额外的输入框，以便用户能够输入信息。这适用于第一行，但是当生成另一行时，有附加用户输入的问题，以及用户选择没有创建其他选择框。
我在codepen中重新创建了这个问题，任何帮助都会受到大力赞赏。 https://codepen.io/seniorjono/pen/qNYYJp
已编辑：我已经更改了原始的javascript，现在只生成一个静态的表行，但是仍然无法让我的jquery触发其他输入框。 （参见codepen中的'cancer2'）
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<ol>
<section class="form_card">
<li>
<h1>Lorem ipsum dolor sit amet</h1></li>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</h2>
<form id="pt_13" name="pt_13">
<div class="content_split" style="width:25%;">
<label class="check check--radio reveal_content">Yes
<input type="radio" id="pt_1_yes" name="radio" />
<div class="check__indicator"></div>
</label>
</div>
<div class="content_split">
<label class="check check--radio hide_content">No
<input type="radio" id="pt_1_no" name="radio" />
<div class="check__indicator"></div>
</label>
</div>
</form>
<div class="hidden_content">
<form id="pt_14" name="pt_14">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="mans">
<tr>
<td>
<div class="select_new" id="pt_13_1">
<label>
<select>
<option selected disabled>Select Relation</option>
<option>Child</option>
<option>Father</option>
<option>Maternal grandfather</option>
<option>Materal grandmother</option>
<option>Paternal grandfather</option>
<option>Paternal grandmother</option>
<option>Sibling</option>
</select>
</label>
</div>
</td>
<td>
<div class="select_new" id="pt_13_2">
<label>
<select class="cancer">
<option selected disabled> Select Cancer</option>
<option value="Bladder">Bladder</option>
<option value="Breast">Breast</option>
<option value="Colorectal">Colorectal</option>
<option value="Kidney">Kidney</option>
<option value="Lung">Lung</option>
<option value="Leukemia">Leukemia</option>
<option value="Lymphoma">Lymphoma</option>
<option value="Melanoma">Melanoma</option>
<option value="MGUS">Multiple Myeloma/MGUS</option>
<option value="Myelodysplasia">Myelodysplasia/myelodysplastic syndrome</option>
<option value="Prostate">Prostate</option>
<option value="Other">Other</option>
</select>
</label>
</div>
</td>
<td class="cancer_optional">
<div class="select_new Leukemia_type">
<label>
<select>
<option selected disabled>Type of Leukemia</option>
<option>Acute myeloid leukemia (AML)</option>
<option>Chronic myeloid leukemia (CML)</option>
<option>Acute lymphocytic leukemia (ALL)</option>
<option>Chronic lymphocytic leukemia (CLL)</option>
<option>Plamsa cell leukemia</option>
<option>Other leukemia type</option>
<option>Unknown leukemia type</option>
</select>
</label>
</div>
<div class="select_new Lymphoma_type">
<label>
<select>
<option selected disabled>Type of Lymphoma</option>
<option>Hodgkin lymphoma</option>
<option>Non-Hodgkin lymphoma (NHL)</option>
<option>Other lymphoma type</option>
<option>Unkown lymphoma type</option>
</select>
</label>
</div>
<div class="Other_type">
<input type="text" class="other_input_text" id="Other_input_box" placeholder="Please Specify" required/>
</div>
</td>
<td><i class="fa fa-trash"></i>
</td>
</tr>
</table>
<div id="addTableRow" class="hidden_content"><i class="fa fa-plus"></i> Add family member</div>
</div>
</form>
</section>
</ol>
JS
// This section toggles the lymphoma/leukemia/other additional details
$('.cancer').change(function() {
if ($(this).val() == 'Leukemia') {
$(this).closest('td').next('td').find('.Leukemia_type').delay(300).slideDown();
$('.Lymphoma_type, #Other_type').slideUp();}
else if ($(this).val() == 'Lymphoma') {
$(this).closest('td').next('td').find('.Lymphoma_type').delay(300).slideDown();
$('.Leukemia_type, .Other_type').slideUp();}
else if ($(this).val() == 'Other') {
$(this).closest('td').next('td').find('.Other_type').delay(300).slideDown();
$('.Leukemia_type, .Lymphoma_type').slideUp();
}
else {
$('.Leukemia_type, .Lymphoma_type, .Other_type').slideUp()
}
});
// Add Row to table with current details duplicated
$(function() {
$('table').on('click', 'tr i', function(e) {
e.preventDefault();
$(this).parents('tr').remove();
});
$("#addTableRow").click(function() {
$("#mans").each(function() {
var tds = '<tr>';
jQuery.each($('tr:last td', this), function() {
tds += '<td>' + $(this).html() + '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
});
});
// Reveal this section upon user selection of yes
$(function() {
$('.reveal_content').change(function() {
$(this).parents(".form_card").find(".hidden_content").slideToggle();
});
$('.hide_content').change(function() {
$(this).parents(".form_card").find(".hidden_content").slideToggle();
});
});
我很感激任何帮助，因为我现在真的很困难！
答案 0 :(得分：0)
// This section toggles the lymphoma/leukemia/other additional details
$('.hidden_content').on('change', '.cancer', function() {
if ($(this).val() == 'Leukemia') {
$(this).closest('tr').find('.Leukemia_type').delay(300).slideDown();
$(this).closest('tr').find('.Lymphoma_type, #Other_type').slideUp();
} else if ($(this).val() == 'Lymphoma') {
$(this).closest('tr').find('.Lymphoma_type').delay(300).slideDown();
$(this).closest('tr').find('.Leukemia_type, .Other_type').slideUp();
} else if ($(this).val() == 'Other') {
$(this).closest('tr').find('.Other_type').delay(300).slideDown();
$(this).closest('tr').find('.Leukemia_type, .Lymphoma_type').slideUp();
} else {
$(this).closest('tr').find('.Leukemia_type, .Lymphoma_type, .Other_type').slideUp()
}
});
// Add Row to table with current details duplicated
$('table').on('click', 'tr i', function(e) {
e.preventDefault();
$(this).closest('tr').remove();
});
var duplicate = "<tr>" +
" <td>" +
" <div id=\"pt_13_1\" class=\"select_new\">" +
" <label>" +
" <select>" +
" <option disabled=\"\" selected=\"\">Select Relation</option>" +
" <option>Child</option>" +
" <option>Father</option>" +
" <option>Maternal grandfather</option>" +
" <option>Materal grandmother</option>" +
" <option>Paternal grandfather</option>" +
" <option>Paternal grandmother</option>" +
" <option>Sibling</option>" +
" </select>" +
" </label>" +
" </div>" +
" </td>" +
" <td>" +
" <div id=\"pt_13_2\" class=\"select_new\">" +
" <label>" +
" <select class=\"cancer\">" +
" <option disabled=\"\" selected=\"\"> Select Cancer</option>" +
" <option value=\"Bladder\">Bladder</option>" +
" <option value=\"Breast\">Breast</option>" +
" <option value=\"Colorectal\">Colorectal</option>" +
" <option value=\"Kidney\">Kidney</option>" +
" <option value=\"Lung\">Lung</option>" +
" <option value=\"Leukemia\">Leukemia</option>" +
" <option value=\"Lymphoma\">Lymphoma</option>" +
" <option value=\"Melanoma\">Melanoma</option>" +
" <option value=\"MGUS\">Multiple Myeloma/MGUS</option>" +
" <option value=\"Myelodysplasia\">Myelodysplasia/myelodysplastic syndrome</option>" +
" <option value=\"Prostate\">Prostate</option>" +
" <option value=\"Other\">Other</option>" +
" </select>" +
" </label>" +
" </div>" +
" </td>" +
" <td class=\"cancer_optional\">" +
" <div class=\"select_new Leukemia_type\">" +
" <label>" +
" <select>" +
" <option disabled=\"\" selected=\"\">Type of Leukemia</option>" +
" <option>Acute myeloid leukemia (AML)</option>" +
" <option>Chronic myeloid leukemia (CML)</option>" +
" <option>Acute lymphocytic leukemia (ALL)</option>" +
" <option>Chronic lymphocytic leukemia (CLL)</option>" +
" <option>Plamsa cell leukemia</option>" +
" <option>Other leukemia type</option>" +
" <option>Unknown leukemia type</option>" +
" </select>" +
" </label>" +
" </div>" +
" <div class=\"select_new Lymphoma_type\">" +
" <label>" +
" <select>" +
" <option disabled=\"\" selected=\"\">Type of Lymphoma</option>" +
" <option>Hodgkin lymphoma</option>" +
" <option>Non-Hodgkin lymphoma (NHL)</option>" +
" <option>Other lymphoma type</option>" +
" <option>Unkown lymphoma type</option>" +
" </select>" +
" </label>" +
" </div>" +
" <div class=\"Other_type\">" +
" <input type=\"text\" required=\"\" placeholder=\"Please Specify\" id=\"Other_input_box\" class=\"other_input_text\">" +
" </div>" +
" </td>" +
" <td><i class=\"fa fa-trash\"></i>" +
" </td>" +
"</tr>";
$("#addTableRowStatic").click(function() {
$("tbody").append(duplicate);
});
// Reveal this section upon user selection of yes
function reveal() {
$(".hidden_content").show('slideDown');
}
function unreveal() {
$(".hidden_content").hide('slideUp');
}
$('#pt_13').change(function() {
if ($('#pt_1_yes').is(':checked')) {
reveal();
} else {
unreveal();
}
});body {
background: #e3f2fd;
}
.Leukemia_type,
.Lymphoma_type,
.Other_type {
display: none;
}
.form_card,
.form_card_result {
width: 80%;
max-width: 1150px;
margin: 50px auto;
border-radius: 3px;
box-shadow: 0 5px 5px rgba(0, 0, 0, .15);
color: #555;
font-family: Texta-Medium;
font-size: 1.5rem;
font-weight: 400;
background-color: #fff;
padding: 2em;
h1 {
font-family: Texta-Medium;
color: #555;
font-size: 2rem;
margin: 1em 0 0.5em;
text-decoration: underline;
span {
text-decoration: underline;
}
}
h2 {
font-family: Texta-Medium;
color: #0d47a1;
font-size: 1.5rem;
margin: 1em 0 1.5em;
span {
text-decoration: underline;
}
}
h5 {
font-family: TradeGothicLTStd-Cn18;
color: #0d47a1;
font-size: 3rem;
margin: 1em 0 1.5em;
font-weight: 300;
}
td {
padding: 1em 0;
}
.content_split {
display: inline-block;
height: 75px;
width: 50%;
p {
display: inline-block;
}
}
table {
color: #555;
.select_new {
width: 80%;
select {
width: 100%;
}
}
}
#addTableRow,
#addTableRow2,
#addTableRow3,
#addTableRow4,
#addTableRowStatic {
font-family: Texta-Medium;
cursor: pointer;
font-size: 1.2rem;
color: #555;
i {
vertical-align: middle;
padding-right: 10px;
}
}
.fa-trash {
cursor: pointer;
}
}
.hidden_content,
.hidden_card {
display: none;
}
// Disables first delete row
tr:nth-child(1) {
td i: nth-child(1) {
pointer-events: none;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<ol>
<section class="form_card">
<li>
<h1>Do you have a family history of cancer</h1>
</li>
<h2>If yes, please indicate the relatives relationship to you and the type of cancer each one of them was diagnosed with</h2>
<form id="pt_13" name="pt_13">
<div class="content_split" style="width:25%;">
<label class="check check--radio reveal_content">Yes
<input type="radio" id="pt_1_yes" name="radio" />
<div class="check__indicator"></div>
</label>
</div>
<div class="content_split">
<label class="check check--radio hide_content">No
<input type="radio" id="pt_1_no" name="radio" />
<div class="check__indicator"></div>
</label>
</div>
</form>
<div class="hidden_content">
<form id="pt_14" name="pt_14">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="CancerTab">
<tr>
<td>
<div class="select_new" id="pt_13_1">
<label>
<select>
<option selected disabled>Select Relation</option>
<option>Child</option>
<option>Father</option>
<option>Maternal grandfather</option>
<option>Materal grandmother</option>
<option>Paternal grandfather</option>
<option>Paternal grandmother</option>
<option>Sibling</option>
</select>
</label>
</div>
</td>
<td>
<div class="select_new" id="pt_13_2">
<label>
<select class="cancer">
<option selected disabled>Select Cancer</option>
<option value="Bladder">Bladder</option>
<option value="Breast">Breast</option>
<option value="Colorectal">Colorectal</option>
<option value="Kidney">Kidney</option>
<option value="Lung">Lung</option>
<option value="Leukemia">Leukemia</option>
<option value="Lymphoma">Lymphoma</option>
<option value="Melanoma">Melanoma</option>
<option value="MGUS">Multiple Myeloma/MGUS</option>
<option value="Myelodysplasia">Myelodysplasia/myelodysplastic syndrome</option>
<option value="Prostate">Prostate</option>
<option value="Other">Other</option>
</select>
</label>
</div>
</td>
<td class="cancer_optional">
<div class="select_new Leukemia_type">
<label>
<select>
<option selected disabled>Type of Leukemia</option>
<option>Acute myeloid leukemia (AML)</option>
<option>Chronic myeloid leukemia (CML)</option>
<option>Acute lymphocytic leukemia (ALL)</option>
<option>Chronic lymphocytic leukemia (CLL)</option>
<option>Plamsa cell leukemia</option>
<option>Other leukemia type</option>
<option>Unknown leukemia type</option>
</select>
</label>
</div>
<div class="select_new Lymphoma_type">
<label>
<select>
<option selected disabled>Type of Lymphoma</option>
<option>Hodgkin lymphoma</option>
<option>Non-Hodgkin lymphoma (NHL)</option>
<option>Other lymphoma type</option>
<option>Unkown lymphoma type</option>
</select>
</label>
</div>
<div class="Other_type">
<input type="text" class="other_input_text" id="Other_input_box" placeholder="Please Specify" required/>
</div>
</td>
<td><i class="fa fa-trash"></i>
</td>
</tr>
</table>
<div id="addTableRowStatic" class="hidden_content"><i class="fa fa-plus"></i> Add family member</div>
</div>
</form>
</section>
</ol>