CODEWITHSUNDEEP
jqueryajax
S.M_Emamian
S.M_Emamian

Reputation: 17383

why add new option empty tag after load from ajax

I have two dropdowns list as category and subs. I would like to when user changed category dorpdown, second dropdown become reload from server :

<select id="cats">
  @foreach($all_cat as $c)
  <option value="{{$c->id}}">{{$c->title}}</option>
  @endforeach
</select>

<br />

<select id="subs">

</select>

my jquery code :

$('#cats').on('change', function() {
    var cats = $('#cats').val();
    $('#subs option').remove();
    $.post('{{base_url()}}cp/VitrinSection/getCategoriesByAjax' , {cats:cats , subs:0 , subs2:0 } , function(data){
        $("#subs").append(data);
        console.log(data);
    })
});

$('#subs').on('change', function() {

});

everything works fine but after use append function an empty option alternate added to my subs dropdown list !

my console log after get data :

<option value='1'>A<option><option value='2'>B<option><option value='3'>c<option><option value='4'>D<option>

my server code :

public function getCategoriesByAjax(){
    $posts = $this->input->post();

    if($posts['cats'] != 0){
        $cat_id = $posts['cats'];
        $subs = $this->M_Vitrin->getSubCategories();
        $value = '' ;
        foreach($subs as $s ){
            if($s->ads_cat_id == $cat_id){
                $value .= "<option value='$s->id'>$s->title<option>";
            }
        }

        echo $value;

    }else if($posts['subs'] != 0){

    }else{

    }
}

after get data from server :

<select id="subs">
<option value="1">A</option>
<option></option>//?
<option value="2">B</option>
<option></option>//?
<option value="3">C</option>
<option></option>//?
<option value="4">D</option>
<option></option> //?
</select>

Upvotes: 0

Views: 72

Answers (1)

guradio
guradio

Reputation: 15555

public function getCategoriesByAjax(){
    $posts = $this->input->post();

    if($posts['cats'] != 0){
        $cat_id = $posts['cats'];
        $subs = $this->M_Vitrin->getSubCategories();
        $value = '' ;
        foreach($subs as $s ){
            if($s->ads_cat_id == $cat_id){
                $value .= "<option value='$s->id'>$s->title</option>"; //close properly
            }
        }

        echo $value;

    }else if($posts['subs'] != 0){

    }else{

    }
}

from the code above you need to close the option properly change

if($s->ads_cat_id == $cat_id){ $value .= "<option value='$s->id'>$s->title<option>"; } close properly change to $value .= "<option value='$s->id'>$s->title</option>";

Upvotes: 1

Related Questions