jQuery how to append under in option menu to specify itemSorting options elements alphabetically using jQueryHow do you remove all the options of a select box and then add one option and select it with jQuery?What is the best way to add options to a select from as a JS object with jQuery?How do I check if an element is hidden in jQuery?jQuery get specific option tag textHow to insert an item into an array at a specific index (JavaScript)?How can I know which radio button is selected via jQuery?How to check whether a checkbox is checked in jQuery?How can I select an element with multiple classes in jQuery?How can I refresh a page with jQuery?jQuery Get Selected Option From Dropdown

Is there a word to describe the feeling of being transfixed out of horror?

Translation of Scottish 16th century church stained glass

Can someone explain how this makes sense electrically?

A Permanent Norse Presence in America

Can I sign legal documents with a smiley face?

Indicating multiple different modes of speech (fantasy language or telepathy)

How do ground effect vehicles perform turns?

Is it possible to have a strip of cold climate in the middle of a planet?

Global amount of publications over time

Two-sided logarithm inequality

How can Trident be so inexpensive? Will it orbit Triton or just do a (slow) flyby?

Do the concepts of IP address and network interface not belong to the same layer?

Drawing ramified coverings with tikz

My friend sent me a screenshot of a transaction hash, but when I search for it I find divergent data. What happened?

Bob has never been a M before

How do I extrude a face to a single vertex

Varistor? Purpose and principle

Can somebody explain Brexit in a few child-proof sentences?

Why did the EU agree to delay the Brexit deadline?

Does having a TSA Pre-Check member in your flight reservation increase the chances that everyone gets Pre-Check?

How to align and center standalone amsmath equations?

How do I implement a file system driver driver in Linux?

How do I repair my stair bannister?

Why did the HMS Bounty go back to a time when whales are already rare?



jQuery how to append under in option menu to specify item


Sorting options elements alphabetically using jQueryHow do you remove all the options of a select box and then add one option and select it with jQuery?What is the best way to add options to a select from as a JS object with jQuery?How do I check if an element is hidden in jQuery?jQuery get specific option tag textHow to insert an item into an array at a specific index (JavaScript)?How can I know which radio button is selected via jQuery?How to check whether a checkbox is checked in jQuery?How can I select an element with multiple classes in jQuery?How can I refresh a page with jQuery?jQuery Get Selected Option From Dropdown













0















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>












share|improve this question
























  • You can append at last and then can sort all options. you can check this link for sorting option: stackoverflow.com/questions/12073270/…

    – Rohit Mittal
    Mar 8 at 6:03











  • Your brackets and parenthesis in your jQuery isn't matching up.

    – Qirel
    Mar 8 at 6:13











  • i edited my question

    – Dogan Ozer
    Mar 8 at 7:33











  • if i use sort method by ids, there was different values integers is it sort to correct places as indented?

    – Dogan Ozer
    Mar 8 at 8:10
















0















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>












share|improve this question
























  • You can append at last and then can sort all options. you can check this link for sorting option: stackoverflow.com/questions/12073270/…

    – Rohit Mittal
    Mar 8 at 6:03











  • Your brackets and parenthesis in your jQuery isn't matching up.

    – Qirel
    Mar 8 at 6:13











  • i edited my question

    – Dogan Ozer
    Mar 8 at 7:33











  • if i use sort method by ids, there was different values integers is it sort to correct places as indented?

    – Dogan Ozer
    Mar 8 at 8:10














0












0








0


1






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>












share|improve this 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>








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





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






php jquery






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Mar 8 at 8:32









freedomn-m

13.2k32148




13.2k32148










asked Mar 8 at 5:58









Dogan OzerDogan Ozer

7010




7010












  • You can append at last and then can sort all options. you can check this link for sorting option: stackoverflow.com/questions/12073270/…

    – Rohit Mittal
    Mar 8 at 6:03











  • Your brackets and parenthesis in your jQuery isn't matching up.

    – Qirel
    Mar 8 at 6:13











  • i edited my question

    – Dogan Ozer
    Mar 8 at 7:33











  • if i use sort method by ids, there was different values integers is it sort to correct places as indented?

    – Dogan Ozer
    Mar 8 at 8:10


















  • You can append at last and then can sort all options. you can check this link for sorting option: stackoverflow.com/questions/12073270/…

    – Rohit Mittal
    Mar 8 at 6:03











  • Your brackets and parenthesis in your jQuery isn't matching up.

    – Qirel
    Mar 8 at 6:13











  • i edited my question

    – Dogan Ozer
    Mar 8 at 7:33











  • if i use sort method by ids, there was different values integers is it sort to correct places as indented?

    – Dogan Ozer
    Mar 8 at 8:10

















You can append at last and then can sort all options. you can check this link for sorting option: stackoverflow.com/questions/12073270/…

– Rohit Mittal
Mar 8 at 6:03





You can append at last and then can sort all options. you can check this link for sorting option: stackoverflow.com/questions/12073270/…

– Rohit Mittal
Mar 8 at 6:03













Your brackets and parenthesis in your jQuery isn't matching up.

– Qirel
Mar 8 at 6:13





Your brackets and parenthesis in your jQuery isn't matching up.

– Qirel
Mar 8 at 6:13













i edited my question

– Dogan Ozer
Mar 8 at 7:33





i edited my question

– Dogan Ozer
Mar 8 at 7:33













if i use sort method by ids, there was different values integers is it sort to correct places as indented?

– Dogan Ozer
Mar 8 at 8:10






if i use sort method by ids, there was different values integers is it sort to correct places as indented?

– Dogan Ozer
Mar 8 at 8:10













2 Answers
2






active

oldest

votes


















1















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.






share|improve this answer























  • Thanks , it was easy but i can not see that easy method

    – Dogan Ozer
    Mar 8 at 9:07


















0














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






share|improve this answer

























  • i edited my question

    – Dogan Ozer
    Mar 8 at 7:33











  • I made a change.

    – Shoyeb Sheikh
    Mar 8 at 8:09











  • Thanks for the update but not append to option menu anything. Am ii mistake somewhere?

    – Dogan Ozer
    Mar 8 at 8:21












  • what variable holds the value of textbox, where is the textbox ? put the textbox in question

    – Shoyeb Sheikh
    Mar 8 at 8:28











  • i added textbox in my question, normaly that my codes append to iem on option menu except sorting

    – Dogan Ozer
    Mar 8 at 8:32











Your Answer






StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













draft saved

draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55057518%2fjquery-how-to-append-under-in-option-menu-to-specify-item%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown

























2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes









1















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.






share|improve this answer























  • Thanks , it was easy but i can not see that easy method

    – Dogan Ozer
    Mar 8 at 9:07















1















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.






share|improve this answer























  • Thanks , it was easy but i can not see that easy method

    – Dogan Ozer
    Mar 8 at 9:07













1












1








1








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.






share|improve this answer














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.






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





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






share|improve this answer












share|improve this answer



share|improve this answer










answered Mar 8 at 8:38









freedomn-mfreedomn-m

13.2k32148




13.2k32148












  • Thanks , it was easy but i can not see that easy method

    – Dogan Ozer
    Mar 8 at 9:07

















  • Thanks , it was easy but i can not see that easy method

    – Dogan Ozer
    Mar 8 at 9:07
















Thanks , it was easy but i can not see that easy method

– Dogan Ozer
Mar 8 at 9:07





Thanks , it was easy but i can not see that easy method

– Dogan Ozer
Mar 8 at 9:07













0














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






share|improve this answer

























  • i edited my question

    – Dogan Ozer
    Mar 8 at 7:33











  • I made a change.

    – Shoyeb Sheikh
    Mar 8 at 8:09











  • Thanks for the update but not append to option menu anything. Am ii mistake somewhere?

    – Dogan Ozer
    Mar 8 at 8:21












  • what variable holds the value of textbox, where is the textbox ? put the textbox in question

    – Shoyeb Sheikh
    Mar 8 at 8:28











  • i added textbox in my question, normaly that my codes append to iem on option menu except sorting

    – Dogan Ozer
    Mar 8 at 8:32
















0














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






share|improve this answer

























  • i edited my question

    – Dogan Ozer
    Mar 8 at 7:33











  • I made a change.

    – Shoyeb Sheikh
    Mar 8 at 8:09











  • Thanks for the update but not append to option menu anything. Am ii mistake somewhere?

    – Dogan Ozer
    Mar 8 at 8:21












  • what variable holds the value of textbox, where is the textbox ? put the textbox in question

    – Shoyeb Sheikh
    Mar 8 at 8:28











  • i added textbox in my question, normaly that my codes append to iem on option menu except sorting

    – Dogan Ozer
    Mar 8 at 8:32














0












0








0







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






share|improve this answer















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







share|improve this answer














share|improve this answer



share|improve this answer








edited Mar 8 at 8:53

























answered Mar 8 at 6:40









Shoyeb SheikhShoyeb Sheikh

369111




369111












  • i edited my question

    – Dogan Ozer
    Mar 8 at 7:33











  • I made a change.

    – Shoyeb Sheikh
    Mar 8 at 8:09











  • Thanks for the update but not append to option menu anything. Am ii mistake somewhere?

    – Dogan Ozer
    Mar 8 at 8:21












  • what variable holds the value of textbox, where is the textbox ? put the textbox in question

    – Shoyeb Sheikh
    Mar 8 at 8:28











  • i added textbox in my question, normaly that my codes append to iem on option menu except sorting

    – Dogan Ozer
    Mar 8 at 8:32


















  • i edited my question

    – Dogan Ozer
    Mar 8 at 7:33











  • I made a change.

    – Shoyeb Sheikh
    Mar 8 at 8:09











  • Thanks for the update but not append to option menu anything. Am ii mistake somewhere?

    – Dogan Ozer
    Mar 8 at 8:21












  • what variable holds the value of textbox, where is the textbox ? put the textbox in question

    – Shoyeb Sheikh
    Mar 8 at 8:28











  • i added textbox in my question, normaly that my codes append to iem on option menu except sorting

    – Dogan Ozer
    Mar 8 at 8:32

















i edited my question

– Dogan Ozer
Mar 8 at 7:33





i edited my question

– Dogan Ozer
Mar 8 at 7:33













I made a change.

– Shoyeb Sheikh
Mar 8 at 8:09





I made a change.

– Shoyeb Sheikh
Mar 8 at 8:09













Thanks for the update but not append to option menu anything. Am ii mistake somewhere?

– Dogan Ozer
Mar 8 at 8:21






Thanks for the update but not append to option menu anything. Am ii mistake somewhere?

– Dogan Ozer
Mar 8 at 8:21














what variable holds the value of textbox, where is the textbox ? put the textbox in question

– Shoyeb Sheikh
Mar 8 at 8:28





what variable holds the value of textbox, where is the textbox ? put the textbox in question

– Shoyeb Sheikh
Mar 8 at 8:28













i added textbox in my question, normaly that my codes append to iem on option menu except sorting

– Dogan Ozer
Mar 8 at 8:32






i added textbox in my question, normaly that my codes append to iem on option menu except sorting

– Dogan Ozer
Mar 8 at 8:32


















draft saved

draft discarded
















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55057518%2fjquery-how-to-append-under-in-option-menu-to-specify-item%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Can't initialize raids on a new ASUS Prime B360M-A motherboard2019 Community Moderator ElectionSimilar to RAID config yet more like mirroring solution?Can't get motherboard serial numberWhy does the BIOS entry point start with a WBINVD instruction?UEFI performance Asus Maximus V Extreme

Identity Server 4 is not redirecting to Angular app after login2019 Community Moderator ElectionIdentity Server 4 and dockerIdentityserver implicit flow unauthorized_clientIdentityServer Hybrid Flow - Access Token is null after user successful loginIdentity Server to MVC client : Page Redirect After loginLogin with Steam OpenId(oidc-client-js)Identity Server 4+.NET Core 2.0 + IdentityIdentityServer4 post-login redirect not working in Edge browserCall to IdentityServer4 generates System.NullReferenceException: Object reference not set to an instance of an objectIdentityServer4 without HTTPS not workingHow to get Authorization code from identity server without login form

2005 Ahvaz unrest Contents Background Causes Casualties Aftermath See also References Navigation menue"At Least 10 Are Killed by Bombs in Iran""Iran"Archived"Arab-Iranians in Iran to make April 15 'Day of Fury'"State of Mind, State of Order: Reactions to Ethnic Unrest in the Islamic Republic of Iran.10.1111/j.1754-9469.2008.00028.x"Iran hangs Arab separatists"Iran Overview from ArchivedConstitution of the Islamic Republic of Iran"Tehran puzzled by forged 'riots' letter""Iran and its minorities: Down in the second class""Iran: Handling Of Ahvaz Unrest Could End With Televised Confessions""Bombings Rock Iran Ahead of Election""Five die in Iran ethnic clashes""Iran: Need for restraint as anniversary of unrest in Khuzestan approaches"Archived"Iranian Sunni protesters killed in clashes with security forces"Archived