当我想通过 ajax 调用添加新的复选框输入时,我的脚本中有一个严重的问题。问题是插入后我无法检索此复选框的值。当我更改选择 1 和选择 2 以及选择 3 和选项时。警报必须在每次字段更改时显示 4 个字段的值。
我在 jsfiddle 中给出了一个例子:https://jsfiddle.net/pm4t91ab/39/
脚本代码:
<script>
$(function() {
$(".ch").change(function() {
// Récupérer les données du formulaire
var select1 = $("select#id1").val();
var select2 = $("select#id2").val();
var country = $("select#country").val();
var options = "";
var op = "<td>Options :</td>" +
"<br />" +
"<td>" +
"<div>" +
"<label>" +
"<input type='checkbox' class='ch' id='option1' name='options' class='ch' value='1'>Option1</label>" +
"</div>" +
"<div>" +
"<label>" +
"<input type='checkbox' id='option2' name='options' class='ch' value='2'>Option2</label>" +
"</div>" +
"</td>";
if (country != "") {
$('#options_insert').html(op);
}
// Bind the elements dynamically created here and get the selected items
$(document).on('click', 'input[name="options"]', function() {
var options = $("input[name=options]:checked").map(function() { return this.value;}).get().join(",");
});
alert("select1=" + select1 + " select2=" + select2 + " Country=" + country + " options=" + options);
});
});
</script>
HTML 代码:
<table>
<tr>
<td>
Selection 1 :
</td>
<td>
<select name="select1" class="ch" id="id1">
<option value="">Nothing</option>
<option value="val1">val1</option>
<option value="val2">val2</option>
<option value="val3">val3</option>
</select>
</td>
</tr>
<tr>
<td>
Selection 2 :
</td>
<td>
<select name="select2" class="ch" id="id2">
<option value="">Nothing</option>
<option value="val1">sel1</option>
<option value="val2">sel2</option>
<option value="val3">sel3</option>
</select>
</td>
</tr>
<tr>
<td>
Selection 3 :
</td>
<td>
<select name="select" class="ch" id="country">
<option value="">Nothing</option>
<option value="val1">Maroc</option>
<option value="val2">USA</option>
<option value="val3">Egypt</option>
</select>
</td>
</tr>
<tr id="options_insert">
</tr>
</table>
任何帮助将非常感激
最佳答案
这是您的代码的更新版本。它将警报值事件处理(当表单值更改时)与显示选项事件处理(当国家/地区值更改时)分开。
$(document).on('change', "select#country", function() {
var $optionsElement = $('#options_insert');
var $selectCountry = $("select#country").val();
if ($selectCountry === '') {
$optionsElement.html("");
} else {
$optionsElement.html("<td>Options :</td>" +
"<br />" +
"<td>" +
"<div>" +
"<label>" +
"<input type='checkbox' class='ch' id='option1' name='options' class='ch' value='1'>Option1</label>" +
"</div>" +
"<div>" +
"<label>" +
"<input type='checkbox' id='option2' name='options' class='ch' value='2'>Option2</label>" +
"</div>" +
"</td>");
}
});
$(document).on('change', '.ch', function() {
var $select1 = $("select#id1").val();
var $select2 = $("select#id2").val();
var $selectCountry = $("select#country").val();
var $options = $("input[name=options]:checked").map(function() {
return this.value;
}).get();
alert("select1=" + $select1 + " select2=" + $select2 + " Country=" + $selectCountry + " options=" + $options.join(","));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
Selection 1 :
</td>
<td>
<select name="select1" class="ch" id="id1">
<option value="">Nothing</option>
<option value="val1">val1</option>
<option value="val2">val2</option>
<option value="val3">val3</option>
</select>
</td>
</tr>
<tr>
<td>
Selection 2 :
</td>
<td>
<select name="select2" class="ch" id="id2">
<option value="">Nothing</option>
<option value="val1">sel1</option>
<option value="val2">sel2</option>
<option value="val3">sel3</option>
</select>
</td>
</tr>
<tr>
<td>
Selection 3 :
</td>
<td>
<select name="select" class="ch" id="country">
<option value="">Nothing</option>
<option value="val1">Maroc</option>
<option value="val2">USA</option>
<option value="val3">Egypt</option>
</select>
</td>
</tr>
<tr id="options_insert"></tr>
</table>
关于javascript - Jquery .change 无法检索插入的复选框值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34538921/