jQuery how to append under in option menu to specify item

Question

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.

            $("#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>

 <input type="text" class="form-control form-control-sm" id="baslik" name="baslik">
<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>

You can append at last and then can sort all options. you can check this link for sorting option: https://stackoverflow.com/questions/12073270/sorting-options-elements-alphabetically-using-jquery — Rohit Mittal, Mar 08 '19 at 06:03
Your brackets and parenthesis in your jQuery isn't matching up. — Qirel, Mar 08 '19 at 06:13
if i use sort method by ids, there was different values integers is it sort to correct places as indented? — Dogan Ozer, Mar 08 '19 at 08:10

score 1 · Accepted Answer · answered Mar 08 '19 at 08:38

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.

You currently append the new option at the bottom with: ').append($('', { value: (son_id), text: " - ".repeat(cizgisayisi) + baslik })

Instead, use .after() to append the new option after the selected one:

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

Example snippet:

$("select>option:checked").after("<option value='99'>inserted</option>");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
<option value="4">4</option>
</select>

If you're worried about the selected item changing during the ajax call, then you can keep a note of the selected ID and restore it, eg:

var id = $("#katID").val();
$.ajax({ 
    ...
}).done(function() {
    $("#katID").val(id);
    $("#katID>option:selected").after(...
});

or pass the "parent" ID with the ajax request and receive in the ajax response.

Thanks , it was easy but i can not see that easy method – Dogan Ozer Mar 08 '19 at 09:07 — Dogan Ozer, Mar 08 '19 at 09:07

Shoyeb Sheikh · Answer 2 · 2019-03-08T08:53:00.323

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control form-control-sm" id="baslik" name="baslik" value="desktop computers ">
<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>
<script>
    var options = [];
    var baslik = $('#baslik').val();
    $("#katID option").each(function()
    {
        options.push([$(this).val(),$(this).text()]); 
        var pieces = $(this).text().split(" ");
        var found = false;
        $.each( pieces, function( i, val ) {
            var pieces2 = baslik.split(" ");            
            $.each( pieces2, function( i, val2 ) {
                if(val && val2 && val.toLowerCase().indexOf(val2.toLowerCase()) != -1 && !found){                    
                    options.push(["some_id"," - "+baslik]); 
                    found = true;
                    return false; 
                }
            })  
            if(found)
                return false; 
        })        

    });
    $('#katID') .find('option') .remove();
    $.each( options, function( i, val ) {
        $('#katID').append($('<option>', {
            value: val[0],
            text: val[1]
          }))
    });

</script>

Try running this code and modify your code as per you want, this code is running well for the matched elements.

Thanks for the update but not append to option menu anything. Am ii mistake somewhere? — Dogan Ozer, Mar 08 '19 at 08:21
what variable holds the value of textbox, where is the textbox ? put the textbox in question — Shoyeb Sheikh, Mar 08 '19 at 08:28
i added textbox in my question, normaly that my codes append to iem on option menu except sorting — Dogan Ozer, Mar 08 '19 at 08:32
thank you very much for your efforts but i fixed it with freedomn-m method, it was very easy but we can not see — Dogan Ozer, Mar 08 '19 at 09:06

jQuery how to append under in option menu to specify item

2 Answers2