[英]selectbox click and send ajax
i have selectbox
and data send by ajax. 我有selectbox
发送的选择selectbox
和数据。 this html 这个HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="kode_hanca" onchange="showModel(this)" name="id_vendor_detail[]" class="form-control vendor" required=""> <option value="">- PILIH -</option> <script> $("select#kode_hanca").on("click", function () { $.ajax({ type: "POST", url: "vendor_inout/vendor_inout_crud.php", dataType: 'json', data: {type: "get_kode_hanca"}, //get_kode_hanca success: function (data) { console.log(data); var teks = ""; $.each(data.kode_hanca, function (index, val) { //looping table detail bahan var id_vendor_detail = val.id_vendor_detail; var kode_hanca = val.kode_hanca; teks += "<option class='target_append' value='" + id_vendor_detail + "'>" + kode_hanca + "</option>"; }); $("#kode_hanca:last").append(teks); } }); }); </script> </select>
data is convert to json and always dinamic. 数据会转换为json,并且始终是动态的。 So every i select the selectbox
data must load again. 因此,每当我选择选择selectbox
数据时,都必须再次加载。 when i use click
or change
its not working to send ajax. 当我使用click
或change
其无法发送Ajax时。 how to solve it ? 怎么解决呢?
"select" tags cannot contain any other tags, it can only contain "option" tag. “选择”标签不能包含任何其他标签,只能包含“选项”标签。
try below code :- 尝试下面的代码:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="kode_hanca" onchange="showModel(this)" name="id_vendor_detail[]" class="form-control vendor" required="">
<option value="">- PILIH -</option>
</select>
<script type="text/javascript">
$("#kode_hanca").on("click", function () {
$.ajax({
type: "POST",
url: "vendor_inout/vendor_inout_crud.php",
dataType: 'json',
data: {type: "get_kode_hanca"}, //get_kode_hanca
success: function (data) {
console.log(data);
var teks = "";
$.each(data.kode_hanca, function (index, val) { //looping table detail bahan
var id_vendor_detail = val.id_vendor_detail;
var kode_hanca = val.kode_hanca;
teks += "<option class='target_append' value='" + id_vendor_detail + "'>" + kode_hanca + "</option>";
});
$("#kode_hanca:last").append(teks);
}
});
});
</script>
You can also use "change", instead of "click." 您也可以使用“更改”代替“点击”。
Edited:- 编辑:-
Instead you can use below code:- 相反,您可以使用以下代码:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="kode_hanca" onchange="myFunction();" name="id_vendor_detail[]" class="form-control vendor" required="">
<option value="">- PILIH -</option>
</select>
<script type="text/javascript">
function myFunction()
{
showModel(this);
$.ajax({
type: "POST",
url: "vendor_inout/vendor_inout_crud.php",
dataType: 'json',
data: {type: "get_kode_hanca"}, //get_kode_hanca
success: function (data) {
console.log(data);
var teks = "";
$.each(data.kode_hanca, function (index, val) { //looping table detail bahan
var id_vendor_detail = val.id_vendor_detail;
var kode_hanca = val.kode_hanca;
teks += "<option class='target_append' value='" + id_vendor_detail + "'>" + kode_hanca + "</option>";
});
$("#kode_hanca:last").append(teks);
}
});
}
</script>
select dropdown you should try onchange functionality. 选择下拉菜单,您应该尝试使用onchange功能。
<script type="text/javascript">
$("#kode_hanca").on("change", function () {
$.ajax({
type: "POST",
url: "vendor_inout/vendor_inout_crud.php",
dataType: 'json',
data: {type: "get_kode_hanca"}, //get_kode_hanca
success: function (data) {
console.log(data);
var teks = "";
$.each(data.kode_hanca, function (index, val) { //looping table detail bahan
var id_vendor_detail = val.id_vendor_detail;
var kode_hanca = val.kode_hanca;
teks += "<option class='target_append' value='" + id_vendor_detail + "'>" + kode_hanca + "</option>";
});
$("#kode_hanca:last").append(teks);
}
});
});
</script>
Try this: 尝试这个:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function changeSelect() {
$.ajax({
type: "POST",
url: "vendor_inout/vendor_inout_crud.php",
dataType: 'json',
data: {type: "get_kode_hanca"}, //get_kode_hanca
success: function (data) {
console.log(data);
var teks = "";
$.each(data.kode_hanca, function (index, val) { //looping table detail bahan
var id_vendor_detail = val.id_vendor_detail;
var kode_hanca = val.kode_hanca;
teks += "<option class='target_append' value='" + id_vendor_detail + "'>" + kode_hanca + "</option>";
});
$("#kode_hanca:last").append(teks);
}
});
}
</script>
<select id="kode_hanca" onClick="changeSelect(this.selectedIndex);" name="id_vendor_detail[]" class="target form-control vendor" required="">
<option value="">- PILIH -</option>
</select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.