Bilgisayar » seçenek kutusu http://www.bilgisayar.me Wed, 29 Aug 2018 20:31:06 +0000 tr-TR hourly 1 https://wordpress.org/?v=4.2.29 Jquery ile HTML seçme kutusuna bir değer ekleme http://www.bilgisayar.me/index.php/2015/07/29/jquery-ile-html-secme-kutusuna-bir-deger-ekleme/ http://www.bilgisayar.me/index.php/2015/07/29/jquery-ile-html-secme-kutusuna-bir-deger-ekleme/#comments Wed, 29 Jul 2015 19:14:44 +0000 http://www.bilgisayar.me/?p=1320 DEMO]]> Bu yazımızda jQuery ile HTML seçme kutusuna yeni bir seçenek eklemek nasıl olur onu öğrenecegiz.
 

 
 
 
secenekkutusu
 
jQuery ile HTML seçme kutusuna yeni bir seçenek eklemek için önce seçenek kutumuzu oluşturalım.

<select name="box-1" id="box-1" class="form-control">
    <option val="MYSQL">MYSQL</option>
    <option val="PHP">PHP</option>
    <option val="JQuery">JQuery</option>
    <option val="HTML">HTML</option>
    <option val="CSS3">CSS3</option>
</select>
<input name="yeniekle"  id="yeniekle" type="text" class="form-control" placeholder="eklenecek kelime"/>
<button name="secekle" id="secekle" type="button" class="btn btn-info">Yeni Ekle</button>

Daha sonra JQuery kodu ile istenilen kelimeyi seçenek kutumuza ekleyelim.

<script>
(function($){
    $(document).on("click", "#secekle",function(){
        var yeniekle = $("#yeniekle").val();
        if (yeniekle !=''){
            $('#box-1').append('<option value="' + yeniekle + '" selected="selected">' + yeniekle + '</option>');
            $("#yeniekle").val('');
        } else {
            alert ("Eklenecek Kelimeyi Girin");	
            return false;
        }
    });
})(jQuery);
</script>

Hepsi bir arada

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bilgisayar.me</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div>
<select name="box-1" id="box-1" class="form-control">
    <option val="MYSQL">MYSQL</option>
    <option val="PHP">PHP</option>
    <option val="JQuery">JQuery</option>
    <option val="HTML">HTML</option>
    <option val="CSS3">CSS3</option>
</select>
<input name="yeniekle"  id="yeniekle" type="text" class="form-control" placeholder="eklenecek kelime"/>
<button name="secekle" id="secekle" type="button" class="btn btn-info">Yeni Ekle</button>
</div>
<script>
(function($){
    $(document).on("click", "#secekle",function(){
        var yeniekle = $("#yeniekle").val();
        if (yeniekle !=''){
            $('#box-1').append('<option value="' + yeniekle + '" selected="selected">' + yeniekle + '</option>');
            $("#yeniekle").val('');
        } else {
            alert ("Eklenecek Kelimeyi Girin");	
            return false;
        }
    });
})(jQuery);
</script>
</body>
</html>
]]> http://www.bilgisayar.me/index.php/2015/07/29/jquery-ile-html-secme-kutusuna-bir-deger-ekleme/feed/ 0