 |
Drop Down List Dependent ไม่ทำงานครับ ผมเขียน Script ผิดตรงไหนครับ |
| |
 |
|
|
 |
 |
|
ผมทำ Drop Down List Dependent 2 ชุด แต่ไม่ยอมทำงานครับ
Code (PHP)
<div class="form-group">
<label class="col-sm-2 control-label">ประเภทรถ <span class="asterisk">*</span></label>
<div class="col-sm-9">
<select id="car_types_id" name="car_types_id">
@foreach($dataCarTypes as $dataCarType)
<option value="{{$dataCarType->id}}">{{$dataCarType->name}}</option>
@endforeach
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">รายการรถ <span class="asterisk">*</span></label>
<div class="col-sm-9">
<select id="car_lists_id" >
<option>กรุณาเลือกประเภทรายการรถ</option>
</select>
</div>
</div>
ส่วน Javascript
Code (JavaScript)
$('#car_types_id').on('change', function () {
var id = $('#car_types_id option:selected').val();
$.ajax({
url: '/list_car/' + id + '/detail'
, method: 'GET'
, }).done(function (data) {
// Clear Value
$('select[name="car_lists_id"]').empty();
// append option
$.each(data, function(i, item) {
// alert(item.name)
$('select[name="car_lists_id"]').append('<option value="'+ item.id +'">'+ item.name +'</option>');
});
}).fail(function (status, data) {
// console.log(data)
})
});
});
ตอน alert(item.name) มันก็ยังมีค่ามาอยู่ แต่ทำไหมมันไ่เอาไปโชว์ใน Selec box ครับ หรือผมทำตรงไหนผิด
ขอบคุณครับ
Tag : PHP, HTML, HTML5, Ajax, jQuery
|
ประวัติการแก้ไข
2018-11-02 12:16:48
|
 |
 |
 |
 |
| Date :
2018-11-02 12:14:55 |
By :
the_cop |
View :
664 |
Reply :
4 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
<select id="car_lists_id" >
ใน่ select ไม่ได้กำหนด name แต่ใน jQuery อ้างอิงด้วย name
$('select[name="car_lists_id"]').append('<option value="'+ item.id +'">'+ item.name +'</option>');
น่าจะผิดตรงนี้ครับ
|
| |
|
|
| |
| Date :
2018-11-02 12:56:12 |
By :
9nonameman |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
Code (JavaScript)
$('#car_types_id').on('change', function () {
//var id = $('#car_types_id option:selected').val();
var id=this.value; // ใช้ pure javascript บ้างก็ได้ ไม่ต้องอ้างอิง jquery อย่างเดียว อันไหนมีให้ใช้ง่ายๆ ก็ใช้มัน
var ob = this; // เตรียมตัวแปร ไว้อ้างอิง เวลา ajax ส่งค่ากลับมา
$.ajax({
url: '/list_car/' + id + '/detail'
// , method: 'GET' ไม่ต้องใส่ก็ได้ เพราะ ไม่มีข้อมูล get หรือ post ส่งไปด้วย เป็น url ล้วนๆ
, dataType: 'json' // ส่งค่ามาเป็น json ต้องกำหนด dataType ด้วย
, error: (status, data)=>{
//* console.log(data);
}
, success: data=>{
$(ob).empty(); // Clear Value
$(data).each((i, item)=>{ // append option
// alert(item.name)
$(ob).append('<option value="'+ item.id +'">'+ item.name +'</option>');
});
}
});
});
ปล. งงที่บอกว่า alert(item.name) ได้มีค่ายังไงเหรอครับ
เพราะ มันไม่น่าจะได้
หรือว่า jquery เปลี่ยน default datatype เป็น json แล้ว
|
ประวัติการแก้ไข
2018-11-02 13:33:44
2018-11-02 13:35:49
| |
|
|
| |
| Date :
2018-11-02 13:28:49 |
By :
Chaidhanan |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
