Formda Birden Fazla Selectbox Kullanımı

• 31-12-2016
• Admin
• 6951 Okunma
• Paylaş
• Paylaş
• Paylaş

Formumuz tercih sistemleri için kullanılmak üzere tasarlandı. Formda tercih yapan kişilerin ilk tercihlerini yaptıktan sonra ikinci üçüncü .... tercihlerini atlayıp 7.sıradan bir tercih yapmaları gibi durumları engellemek amaçlıdır. Yine kullanıcı aynı tercihi birden fazla yapmasınında önüne geçmemizi sağlıyoruz.

head taglarının arasına

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

script taglarımızın içine

$(function(){
  // Herhangi bir selectbox seçildiğinde fonksiyonumuz çalışacak
$("select").on("change", function(){

 //select boxun idsini alıyoruz
var metin =$(this).attr('id'); 

//Boş mu diye kontrol ediyoruz
if($("select#"+metin).val()!==''){
	
//	select boxla seçilen yazımızı value değişkenine atıyoruz
var value = $("select#"+metin).val(); // $("#theSelect option:selected").val();
	
 //idnin başında a harfini atıyoruz
var yeni_metin = metin.replace('a','');

//yeni oluşan metni sayıya çeviriyoruz, 2 ekliyoruz (döngü için gerekli)
var yenitercih2 = Number(yeni_metin)+2;	

// tercihleri azaltılacak selectbox sayısı
var yenitercih1 = Number(yeni_metin)+1;	

 //25 select boxtanda seçtiğimiz değeri disable yapıyoruz.
for (var i = yenitercih1; i < 26; i++) {
	$('select#a'+i+' option[value="'+value+'"]').attr("disabled", true);
}

//tüm select boxları gizliyoruz.
 $("select").hide();	

 //Döngümüzle bulduğumuz sayı kadar select boxu gösteriyoruz.
for (var i = 1; i < yenitercih2; i++) {
$("select#a"+i).show();	
}


// select boxumuz boş seçimli gelmişse
} else {
	
//tüm select boxları gizliyoruz.	
 $("select").hide();
 
 //ilk selectbox hariç tüm select boxların value değerlerini boşatıyoruz
for (var i = 2; i < 26; i++) {
$("select#a"+i).val('');	
}

//İlk selectboxu görünür yapıyoruz.
$("select#a1").show();
}
  });
  
});

Body taglarının içindeki formumuz

<form action="" method="post" class="form-horizontal">
<br>1.Tercih : 
<select class='main' id="a1" name="a1">
   <option value=''> --</option>
  <option value='mitsu'> Mitsubishi</option>
  <option value='audi'> Audi </option>
  <option value='honda'> Honda </option>
  <option value='cadi'> Cadillac </option>
</select>

<br>2.Tercih : 
<select class='main' id="a2" name="a2" style="display:none">
   <option value=''> --</option>
  <option value='mitsu'> Mitsubishi</option>
  <option value='audi'> Audi </option>
  <option value='honda'> Honda </option>
  <option value='cadi'> Cadillac </option>
</select>
<br>3.Tercih : 
<select class='main' id="a3" name="a3" style="display:none">
   <option value=''> --</option>
  <option value='mitsu'> Mitsubishi</option>
  <option value='audi'> Audi </option>
  <option value='honda'> Honda </option>
  <option value='cadi'> Cadillac </option>
</select>
<br>4.Tercih : 
<select class='main' id="a4" name="a4" style="display:none">
   <option value=''> --</option>
  <option value='mitsu'> Mitsubishi</option>
  <option value='audi'> Audi </option>
  <option value='honda'> Honda </option>
  <option value='cadi'> Cadillac </option>
</select>
<br>5.Tercih : 
<select class='main' id="a5" name="a5" style="display:none">
   <option value=''> --</option>
  <option value='mitsu'> Mitsubishi</option>
  <option value='audi'> Audi </option>
  <option value='honda'> Honda </option>
  <option value='cadi'> Cadillac </option>
</select>
<br><br>
<button type="submit" class="btn green">Gönder</button>

</form>

PHP Kodlarımız

if(isset($_POST["a1"]) and $_POST["a1"]!==""){  

if(isset($_POST["a1"])) { echo $_POST["a1"].'<br>';	}
if(isset($_POST["a2"])) { echo $_POST["a2"].'<br>';   }
if(isset($_POST["a3"])) { echo $_POST["a3"].'<br>';   }
if(isset($_POST["a4"])) { echo $_POST["a4"].'<br>';   }
if(isset($_POST["a5"])) { echo $_POST["a5"].'<br>';    }

}
?>