Question

我有此数据库驱动的php选项菜单，如果刷新页面，则所有选项项都显示正确的缩进。

如果我添加了新的选项项目并且页面没有刷新，则新的选项项目不会出现在选项菜单中。

然后，我编写该jQuery代码，以便在我将新项目添加到选项菜单时，通过jQuery将其追加，但未将其追加到正确的位置。

示例：如果选择“计算机”，并且在文本框中输入“台式计算机”的文本值，它将附加在选项菜单下，但我希望将其附加在“计算机”选项值下。

我该怎么办，谢谢。

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

Answer 1

如果我选择COMPUTERS，并且如果我在文本框内将文本值写为“台式计算机”，它会附加在选项菜单下，但是我希望它附加在COMPUTERS选项值下。

您当前在新选项的底部附加： '）.append（$（''，{ 值：（son_id），文字：“-” .repeat（cizgisayisi）+ baslik }）

相反，使用.after()将新选项附加到所选的选项之后：

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

示例片段：

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

如果您担心在ajax调用期间所选项目发生更改，那么您可以记下所选ID并将其恢复，例如：

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

或通过ajax请求传递“父” ID并在ajax响应中接收。

Answer 2

<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>

尝试运行此代码并根据需要修改您的代码，此代码对于匹配的元素运行良好。

jQuery如何在选项菜单下追加指定项目

2 个答案: