looking for some solutions? You are welcome.

SOLVED: jQuery how to append under in option menu to specify item

Dogan Ozer:
            $("#katID").change(function() {
                var secilitext = $("#katID option:selected").text();
                var sonuc = secilitext.split(" - ");
                //console.log(sonuc);
                var cizgisayisi2 = (sonuc.length);
                var cizgisayisi = (cizgisayisi2 - 1); //sayılar sı
                var katID = $("#katID option:selected").val();
                console.log("ÇİZGİ SAYISI = " + cizgisayisi2);
                console.log("KAT ID = " + katID);

                if (katID != 0 && cizgisayisi == 0){

                    cizgisayisi = 1;
                    console.log("cizgisayisi 1 : " + cizgisayisi);
                    var gizli = $("input[name='cizgisayisi']").val(cizgisayisi);

                }else if(katID == 0){

                    cizgisayisi = 0;
                    console.log("cizgisayisi 2 : " + cizgisayisi);
                    var gizli = $("input[name='cizgisayisi']").val(cizgisayisi);

                }else{

                    cizgisayisi2;
                    console.log("cizgisayisi 3 : " + cizgisayisi2);
                    var gizli = $("input[name='cizgisayisi']").val(cizgisayisi2);
                }



                //.append(new Array(++cizgisayisi).join



            });


       $("form#SayfaYukleForm").on("submit", function(event) {
                event.preventDefault();
                var eklenecekveri = new FormData(this);
                var baslik = $('#baslik').val();


                $.ajax({
                    url: "add to option menu.php",
                    method: "post",
                    data: eklenecekveri,
                    dataType: "JSON",
                    contentType: false,
                    processData: false,
                    success: function(sonuc) {

                        if (sonuc.ok) {

                            anamenukayitListe();
                            var son_id = sonuc.son_eklenen_id; // last_id has the last insert id
                            var cizgisayisi = sonuc.cizgisayisi;

                                $('#katID').append($('<option>', {
                                    value: (son_id),
                                    text: " - ".repeat(cizgisayisi) + baslik
                                }));




                            $("form#SayfaYukleForm").trigger("reset");
                            //form yollanınca formdaki kalan verileri resetlemek temizlemek için
                            $("#anamenuKayitEkle").html(sonuc.ok).fadeIn(700);
                            setTimeout(function() {
                                $("#anamenuKayitEkle").html(sonuc.ok).fadeOut(700);
                                //location.reload();
                            }, 2000);

                            $("#summernote").summernote("reset"); //summernote textarea alanınındaki yazıları boşalt.
                        } else if (sonuc.hata) {
                            $("#anamenuKayitEkle").html(sonuc.hata).fadeIn(700);
                            setTimeout(function() {
                                $("#anamenuKayitEkle").html(sonuc.hata).fadeOut(700);

                            }, 2000);
                        }

                    },
                    error: function(jqXHR, exception) {
                        console.log(jqXHR);
                    }


                });
            });
            //kayıt ekle
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control form-control-sm" id="katID" name="katID">
<option value="">Select A Category</option>
<option value="0">TOP MENU</option>
<option value="166">ELECTRONICS</option>
<option value="167"> - COMPUTERS</option>
<option value="170"> -  - DESKTOPS</option>
<option value="172"> -  -  - ASUS DESKTOP</option>
<option value="169"> -  - NOTEBOOKS</option>
<option value="168"> -  - TABLETS</option>
<option value="171"> -  -  - SAMSUNG TABLETS</option>
<option value="173"> - TELEVISIONS</option>
</select>

I have this database driven php option menu, if the page is refreshed then all option items show correctly indented.

If I add a new option item and the page is not refreshed then the new option item does not appear in option menu.

Then I write that jQuery code so that if I add a new item to the option menu, it is appended via jQuery but it is not append to correct place.

Example: If I select COMPUTERS and if I write a text value inside the textbox as "Desktop Computers" it is appended under the option menu, but I want it to append under the COMPUTERS option value.

How can I do that, thanks.



Posted in S.E.F
via StackOverflow & StackExchange Atomic Web Robots
Share:

No comments:

Recent