dropdown option and action

dropdown option and action - javascript

I have a drop down and inside that i have options. On clicking the option it must display fields respectively.
Like for
option1 == one text box
option2 == two text box and so on...
<select id="dropdown">
<option value="A">option1</option>
<option value="B">option2</option>
<option value="C">option3</option>
<option value="D">option4</option>
</select>
on clicking option1 one field must be shown. on option2 two fields.. am new to javascript and html. Please help friends..

If you can use jquery it can be done like below. On change select a data attribute containing the number of textboxes to display. Then for loop through them and append.
Demo
Html:
<select id="dropdown">
<option value="A" data-number="1">option1</option>
<option value="B" data-number="2">option2</option>
<option value="C" data-number="3">option3</option>
<option value="D" data-number="4">option4</option>
</select>
<div id="textBoxContainer">
</div>
Javascript:
$('#dropdown').change(function(){
$('#textBoxContainer').empty();
var number = $(this).find('option:selected').attr('data-number');
for (var i = 0; i < number; i++){
$('#textBoxContainer').append('<input type="text"/>');
}
});

<select id="dropdown" onChange="showHide()">
<option value="A">option1</option>
<option value="B">option2</option>
<option value="C">option3</option>
<option value="D">option4</option>
</select>
function showHide()
{
hideAll();
var val = document.getElementById("dropdown").value;
if(val == "A")
document.getElementById("firstTextBoxId").style.display = 'block';
else if(val == "B")
document.getElementById("secondTextBoxId").style.display = 'block';
else if(val == "C")
document.getElementById("ThirdTextBoxId").style.display = 'block';
else if(val == "D")
document.getElementById("FourthTextBoxId").style.display = 'block';
}
function hideAll()
{
document.getElementById("firstTextBoxId").style.display = 'none';
document.getElementById("secondTextBoxId").style.display = 'none';
document.getElementById("thirdTextBoxId").style.display = 'none';
document.getElementById("fourthTextBoxId").style.display = 'none';
}

Related

show/hide section in wordpress with select values

I use Divi Theme in Wordpress.
I have sections that I gave IDs.
I have a select, and for each option value I use the sections IDs.
I want show one section by changing the select option and hide the other section that is showed.
Here is the select :
<select name="years" id="mySelect" onchange="myFunction()">
<option value="">TOUTES LES ANNÉES </option>
<option value="section2020">2020</option>
<option value="section2019">2019</option>
<option value="section2018">2018</option>
<option value="section2017">2017</option>
<option value="section2016">2016</option>
<option value="section2015">2015</option>
</select>
Here is the javascript :
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
if (x.style === "display:none;") {
x.style = "display:block";
} else {
x.style = "display:none;";
}
}
</script>
Could you tell my why it's not working ?
thanks
Caroline

In your code, you are trying to style a string value x.style
If we see closely var x = document.getElementById("mySelect").value; this is returning a string value not an html element. But yes we can use this string value to get html element and make it visible and hide other.
function myFunction() {
var selectElement = document.getElementById("mySelect");
var selectedValue = selectElement.value;
var selectedElement = document.getElementById(selectedValue);
if (selectedElement.style.display === "none") {
var elements = document.getElementsByClassName('section');
for(var i = 0; i < elements.length; i++){
elements[i].style.display = "none";
}
selectedElement.style.display = "block";
}
else {
selectedElement.style.display = "none";
}
}
<select name="years" id="mySelect" onchange="myFunction()">
<option value="">TOUTES LES ANNÉES </option>
<option value="section2020">2020</option>
<option value="section2019">2019</option>
<option value="section2018">2018</option>
<option value="section2017">2017</option>
<option value="section2016">2016</option>
<option value="section2015">2015</option>
</select>
<div id="section2020" class='section' style='display:none'><h1>2020</h1></div>
<div id="section2019" class='section' style='display:none'><h1>2019</h1></div>
<div id="section2018" class='section' style='display:none'><h1>2018</h1></div>
<div id="section2017" class='section' style='display:none'><h1>2017</h1></div>
<div id="section2016" class='section' style='display:none'><h1>2016</h1></div>
<div id="section2015" class='section' style='display:none'><h1>2015</h1></div>

So thank you so much #Dupinder Singh. After playing with the code, I got it to work on my DIVI theme.
However, since you can't put in-line CSS styles on a Section in DIVI, I did the following. I went under each section and under the Advanced Tab -> Custom CSS -> Main Content = display: none;
Then since each section appeared like so I changed the javascript to the following:
<script>
function myFunction() {
var selectElement = document.getElementById("serviceoptions");
var selectedValue = selectElement.value;
var selectedElement = document.getElementById(selectedValue);
if (selectedElement.style.display === "") {
var elements = document.getElementsByClassName('section');
for(var i = 0; i < elements.length; i++){
elements[i].style.display = "";
}
selectedElement.style.display = "block";
}
else {
selectedElement.style.display = "none";
}
}
</script>
The following was my HTML for the Selection Menu:
<p style="text-align: center;">
<Select id="serviceoptions" onchange="myFunction()">
<option value="">Choose a Service</option>
<option value="behavior">Behavior Resources</option>
<option value="case">Case Management Resources</option>
<option value="education">Education Resources</option>
<option value="speceducation">Specialized Education Resources</option>
<option value="afterschool">After School Programs</option>
<option value="kidhealth">Children's Health Resources</option>
<option value="kidoralhealth">Children's Oral Health Resources</option>
<option value="homevisit">Home Visiting Resources</option>
<option value="nutrition">Nutrition Resources</option>
<option value="parent">Parent Resources</option>
<option value="transpo">Transportation Resources</option>
<option value="kidcare">Child Care Resources</option>
</select>
</p>
You can see it in action here: first1thousand.com/resources

How to get a dropbox to show options in another dropbox

I was thinking if it's possible to let a select dropdown box deside which options there will be in another select dropbox.
For example, i would like to have a checkbox, if that's checked a dropbox will appear. And when choosing an option i that dropbox, a new dropbox would appear.
Then if i have choosed days, in the first dropbox, then i would be able to choose between all days of the week in the new dropbox.
Then if i choose weeks, in the first dropbox, then i would be able to choose between all weeks numbers in the new dropbox.
And so on..
I have tried to google it, but without any luck. The first part with the checkbox and getting the frist dropbox appears is easy enough, but the last part, not so much for me.
Sorry if my english is bad and my question is a little hard to understand.
Edit:
<script>
function showSelect() {
var checkBox = document.getElementById("checked");
var select = document.getElementById("select");
if (checkBox.checked == true){
select.style.display = "block";
} else {
select.style.display = "none";
}
}
</script>
Rot: <input type="checkbox" id="checked" onclick="showSelect()">
<select id="select" style="display:none">
<option disabled="disabled" selected="">-- choose --</option>
<option value="1">Days</option>
<option value="2">Week</option>
</select>

You can do that by listening for a change event on the first select drop down list. Once you get the selected value, you can use it with another if statement to display the next select list. Try this:
function showSelect() {
var checkBox = document.getElementById("checked");
var select = document.getElementById("select");
if (checkBox.checked == true){
select.style.display = "block";
} else {
select.style.display = "none";
}
}
var daysWeeks = document.getElementById('select'),
days = document.getElementById('select-days'),
weeks = document.getElementById('select-weeks');
daysWeeks.addEventListener('change', function() {
var newSelect = daysWeeks.options[daysWeeks.selectedIndex].value;
days.style.display = 'none';
weeks.style.display = 'none';
if (newSelect === '1') {
days.style.display = 'block';
} else if (newSelect === '2') {
weeks.style.display = 'block';
}
});
Rot: <input type="checkbox" id="checked" onclick="showSelect()">
<select id="select" style="display:none">
<option disabled="disabled" selected="">-- choose --</option>
<option value="1">Days</option>
<option value="2">Week</option>
</select>
<select id="select-days" style="display:none">
<option disabled="disabled" selected="">-- choose --</option>
<option value="1">Day1</option>
<option value="2">Day2</option>
</select>
<select id="select-weeks" style="display:none">
<option disabled="disabled" selected="">-- choose --</option>
<option value="1">Week1</option>
<option value="2">Week2</option>
</select>

Show textarea if selected item in listbox changes

I have a listbox, and I want to show a textarea if I have a selected item, it is so simple, but my code isn't working, can any one help me?
Listbox code :
<select onchange="change(this)" name="idUser" class="form-control">
<c:forEach items= '${listeU}' var='p' >
<option value="${p.getIdUser()}"> ${p.getIdUser()} - ${p.getNom()} ${p.getPrenom()}</option>
</c:forEach>
</select>
JS :
function change(obj) {
var selectBox = obj;
var selected = selectBox.options[selectBox.selectedIndex].value;
var textarea = document.getElementById("text_area");
if(selected === '1'){
textarea.show();
}
else{
textarea.style.display = "none";
}
}
Item to show :
<textarea id="text_area" type="text" name="text_area" style="display: none"></textarea>

show() is a jQuery and you're using pure JS so you should replace it by :
textarea.style.display = "block";
Hope this helps.
function change(obj) {
var selectBox = obj;
var selected = selectBox.options[selectBox.selectedIndex].value;
var textarea = document.getElementById("text_area");
if(selected === '1'){
textarea.style.display = "none";
}
else{
textarea.style.display = "block";
}
}
<select onchange="change(this)" name="idUser" class="form-control">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
</select>
<textarea id="text_area" type="text" name="text_area" style="display: none"></textarea>

Form is not working [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
JSS
function kategori(dropdown) {
var value = dropdown.options[dropdown.selectedIndex].value;
if (value == 'emlak'){
document.getElementById("emlak").style.display = "block";
} else if(value != 'emlak'){
document.getElementById("emlak").style.display = "none";
}if(value == 'vasita'){
document.getElementById("vasita").style.display = "block";
}else if(value != 'vasita'){
document.getElementById("vasita").style.display = "none";
}if(value == 'alisveris'){
document.getElementById("alisveris").style.display = "block";
}else if(value != 'alisveris'){
document.getElementById("alisveris").style.display = "none";
}if(value == 'is_makineleri_sanayi'){
document.getElementById("is_makineleri_sanayi").style.display = "block";
}else if(value != 'is_makineleri_sanayi'){
document.getElementById("is_makineleri_sanayi").style.display = "none";
}if(value == 'hizmet'){
document.getElementById("hizmet").style.display = "block";
}else if(value != 'hizmet'){
document.getElementById("hizmet").style.display = "none";
}if(value == 'kariyer'){
document.getElementById("kariyer").style.display = "block";
}else if(value != 'kariyer'){
document.getElementById("kariyer").style.display = "none";
}if(value == 'hayvanlar_alemi'){
document.getElementById("hayvanlar_alemi").style.display = "block";
}else if(value != 'hayvanlar_alemi'){
document.getElementById("hayvanlar_alemi").style.display = "none";
}
}
function emlak(dropdown) {
var value = dropdown.options[dropdown.selectedIndex].value;
if (value == 'konut'){
document.getElementById("konut").style.display = "block";
} else if(value != 'konut'){
document.getElementById("konut").style.display = "none";
} if (value == 'isyeri'){
document.getElementById("isyeri").style.display = "block";
} else if(value != 'isyeri'){
document.getElementById("isyeri").style.display = "none";
} if (value == 'arsa'){
document.getElementById("arsa").style.display = "block";
} else if(value != 'arsa'){
document.getElementById("arsa").style.display = "none";
} if (value == 'projeler'){
document.getElementById("projeler").style.display = "block";
} else if(value != 'projeler'){
document.getElementById("projeler").style.display = "none";
} if (value == 'bina'){
document.getElementById("bina").style.display = "block";
} else if(value != 'bina'){
document.getElementById("bina").style.display = "none";
} if (value == 'devremulk'){
document.getElementById("devremulk").style.display = "block";
} else if(value != 'devre_mulk'){
document.getElementById("devremulk").style.display = "none";
} if (value == 'turistik_tesis'){
document.getElementById("turistik_tesis").style.display = "block";
} else if(value != 'turistik_tesis'){
document.getElementById("turistik_tesis").style.display = "none";
}
}
function konut(dropdown) {
var value = dropdown.options[dropdown.selectedIndex].value;
if (value == 'satilik'){
document.getElementById("satilik").style.display = "block";
}else if(value != 'satilik'){
document.getElementById("satilik").style.display = "none";
}if (value == 'kiralik'){
document.getElementById("kiralik").style.display = "block";
} else if(value != 'kiralik'){
document.getElementById("kiralik").style.display = "none";
}if (value == 'gunluk_kiralik'){
document.getElementById("gunluk_kiralik").style.display = "block";
} else if(value != 'gunluk_kiralik'){
document.getElementById("gunluk_kiralik").style.display = "none";
}
}
function satilik(dropdown) {
var value = dropdown.options[dropdown.selectedIndex].value;
if (value == 'daire'){
document.getElementById("daire").style.display = "block";
}else if(value != 'daire'){
document.getElementById("daire").style.display = "none";
}if (value == 'residence'){
document.getElementById("residence").style.display = "block";
} else if(value != 'residence'){
document.getElementById("residence").style.display = "none";
}if (value == 'mustakil_ev'){
document.getElementById("mustakil_ev").style.display = "block";
} else if(value != 'mustakil_ev'){
document.getElementById("mustakil_ev").style.display = "none";
}if (value == 'villa'){
document.getElementById("villa").style.display = "block";
} else if(value != 'villa'){
document.getElementById("villa").style.display = "none";
}if (value == 'ciftlik_evi'){
document.getElementById("ciftlik_evi").style.display = "block";
} else if(value != 'ciftlik_evi'){
document.getElementById("ciftlik_evi").style.display = "none";
}if (value == 'kosk_konak'){
document.getElementById("kosk_konak").style.display = "block";
} else if(value != 'kosk_konak'){
document.getElementById("kosk_konak").style.display = "none";
}if (value == 'yali'){
document.getElementById("yali").style.display = "block";
} else if(value != 'yali'){
document.getElementById("yali").style.display = "none";
}if (value == 'yali_dairesi'){
document.getElementById("yali_dairesi").style.display = "block";
} else if(value != 'yali_dairesi'){
document.getElementById("yali_dairesi").style.display = "none";
}if (value == 'yazlik'){
document.getElementById("yazlik").style.display = "block";
} else if(value != 'yazlik'){
document.getElementById("yazlik").style.display = "none";
}if (value == 'prefabrik_ev'){
document.getElementById("prefabrik_ev").style.display = "block";
} else if(value != 'prefabrik_ev'){
document.getElementById("prefabrik_ev").style.display = "none";
}if (value == 'kooperatif'){
document.getElementById("kooperatif").style.display = "block";
} else if(value != 'kooperatif'){
document.getElementById("kooperatif").style.display = "none";
}
}
function kiralik(dropdown) {
var value = dropdown.options[dropdown.selectedIndex].value;
if (value == 'daire'){
document.getElementById("daire").style.display = "block";
}else if(value != 'daire'){
document.getElementById("daire").style.display = "none";
}if (value == 'residence'){
document.getElementById("residence").style.display = "block";
} else if(value != 'residence'){
document.getElementById("residence").style.display = "none";
}if (value == 'mustakil_ev'){
document.getElementById("mustakil_ev").style.display = "block";
} else if(value != 'mustakil_ev'){
document.getElementById("mustakil_ev").style.display = "none";
}if (value == 'villa'){
document.getElementById("villa").style.display = "block";
} else if(value != 'villa'){
document.getElementById("villa").style.display = "none";
}if (value == 'ciftlik_evi'){
document.getElementById("ciftlik_evi").style.display = "block";
} else if(value != 'ciftlik_evi'){
document.getElementById("ciftlik_evi").style.display = "none";
}if (value == 'kosk_konak'){
document.getElementById("kosk_konak").style.display = "block";
} else if(value != 'kosk_konak'){
document.getElementById("kosk_konak").style.display = "none";
}if (value == 'yali'){
document.getElementById("yali").style.display = "block";
} else if(value != 'yali'){
document.getElementById("yali").style.display = "none";
}if (value == 'yali_dairesi'){
document.getElementById("yali_dairesi").style.display = "block";
} else if(value != 'yali_dairesi'){
document.getElementById("yali_dairesi").style.display = "none";
}if (value == 'yazlik'){
document.getElementById("yazlik").style.display = "block";
} else if(value != 'yazlik'){
document.getElementById("yazlik").style.display = "none";
}
}
HTML
<form method="post" action="ilan_ver_adim2.php">
<select name="kategori" class="kategori_element" onChange="kategori(this);" size="2">
<option value="emlak">Emlak</option>
<option value="vasita">Vasıta</option>
<option value="yedek_parca_aksesuar_donanim_tuning" title="Yedek Parça, Aksesuar, Donanım & Tuning">Yedek Parça, Aksesuar, Donanım & Tuning</option>
<option value="alisveris">Alışveriş</option>
<option value="is_makineleri_sanayi" title="İş Makineleri & Sanayi">İş Makineleri & Sanayi</option>
<option value="hizmet">Hizmet</option>
<option value="kariyer">Kariyer</option>
<option value="hayvanlar_alemi">Hayvanlar Alemi</option>
</select>
<select id="emlak" name="emlak" class="kategori_element" size="2" onChange="emlak(this);" style="display:none;">
<option value="konut">Konut</option>
<option value="isyeri">İşyeri</option>
<option value="arsa">Arsa</option>
<option value="projeler">Projeler</option>
<option value="bina">Bina</option>
<option value="devremülk">Devremülk</option>
<option value="turistik tesis">Turistik Tesis</option>
</select>
<select class="kategori_element" id="vasita" onChange="" size="2" style="display:none;">
<option value="">Otomobil</option>
<option value="">Arazi, SUV & Pick-up</option>
<option value="">Motosiklet</option>
<option value="">Minivan, Van & Panelvan</option>
<option value="">Ticari Araçlar</option>
<option value="">Kiralık Araçlar</option>
<option value="">Deniz Araçları</option>
<option value="">Hasarlı Araçlar</option>
<option value="">Klasik Araçlar</option>
<option value="">Modifiye Araçlar</option>
<option value="">Hava Araçları</option>
<option value="">ATV</option>
<option value="">UTV</option>
<option value="">Engelli Plakalı Araçlar</option>
<option value="">Karavan</option>
<option value="">Elektrikli Araçlar</option>
</select>
<select class="kategori_element" id="alisveris" onChange="" size="2" style="display:none;">
<option value="">Bilgisayar</option>
<option value="">Cep Telefonu</option>
<option value="">Fotoğraf & Kamera</option>
<option value="">Ev & Dekorasyon</option>
<option value="">Ev Elektroniği</option>
<option value="">Elektronik</option>
<option value="">Giyim & Aksesuar</option>
<option value="">Güzellik & Kozmetik</option>
<option value="">Bahçe & Yapı Market</option>
<option value="">Bebek</option>
<option value="">El İşi & Sanat</option>
<option value="">Hobi & Oyuncak</option>
<option value="">Kitap, Dergi & Film</option>
<option value="">Koleksiyon</option>
<option value="">Müzik</option>
<option value="">Oyun & Konsol</option>
<option value="">Saat</option>
<option value="">Spor</option>
<option value="">Takı, Mücevher & Altın</option>
<option value="">Antika</option>
<option value="">Medikal Ürünler</option>
<option value="">Ofis Malzemeleri</option>
<option value="">Yiyecek & İçecek</option>
<option value="">Diğer Her Şey</option>
</select>
<select class="kategori_element" id="is_makineleri_sanayi" onChange="" size="2" style="display:none;">
<option value="">İş Makinesi</option>
<option value="">Sanayi</option>
<option value="">Elektrik & Enerji</option>
</select>
<select class="kategori_element" id="hizmet" onChange="" size="2" style="display:none;">
<option value="">Vasıta Hizmetleri</option>
<option value="">Ev Tadilat & Dekorasyon</option>
<option value="">Bebek ve Çocuk</option>
<option value="">Nakliye</option>
<option value="">Kiralık Ürünler</option>
<option value="">Kurs & Dershaneler</option>
<option value="">Özel Ders Verenler</option>
<option value="">Baskı Hizmetleri</option>
<option value="">Bayilik Verenler & Franchise</option>
<option value="">Cenaze İşleri</option>
<option value="">Danışmanlık</option>
<option value="">Dış Ticaret & Gümrük</option>
<option value="">Düğün & Organizasyon</option>
<option value="">El Sanatları</option>
<option value="">Evcil Hayvanlar</option>
<option value="">Giyim & Tekstil</option>
<option value="">Güzellik Merkezleri</option>
<option value="">Hurda & Atık</option>
<option value="">Öğrenci Yurdu</option>
<option value="">Reklam & Tanıtım</option>
<option value="">Sağlık & Spor</option>
<option value="">Sigortacılık & Finans</option>
<option value="">Tamir, Teknik Servis</option>
<option value="">Taşeron Hizmetleri</option>
<option value="">Temizlik & İlaçlama</option>
<option value="">Tercümanlık & Çeviri</option>
<option value="">Turizm Hizmetleri</option>
<option value="">Yazılım & Bilgi İşlem</option>
<option value="">Yemek ve Gıda</option>
</select>
<select class="kategori_element" id="kariyer" onChange="" size="2" style="display:none;">
<option value="">Bankacılık</option>
<option value="">Dönemsel İşler</option>
<option value="">Eğitim</option>
<option value="">Güzellik & Bakım</option>
<option value="">Hukuk</option>
<option value="">IT ve Yazılım Geliştirme</option>
<option value="">İnsan Kaynakları</option>
<option value="">İnşaat ve Yapı</option>
<option value="">İşletme ve Stratejik Yönetim</option>
<option value="">Koruma ve Güvenlik</option>
<option value="">Kültür, Sanat ve Eğlence</option>
<option value="">Lojistik ve Taşıma</option>
<option value="">Muhasebe / Finans</option>
<option value="">Mühendislik</option>
<option value="">Müşteri Hizmetleri</option>
<option value="">Ofis Yönetimi ve İdari İşler</option>
<option value="">Pazarlama ve Ürün Yönetimi</option>
<option value="">Restoran ve Konaklama</option>
<option value="">Sağlık</option>
<option value="">Satış</option>
<option value="">Tamir ve Bakım</option>
<option value="">Tasarım / Yaratıcılık</option>
<option value="">Üretim ve İmalat</option>
<option value="">Yetiştirme Hayvancılık</option>
</select>
<select class="kategori_element" id="hayvanlar_alemi" onChange="" size="2" style="display:none;">
<option value="">Evcil Hayvanlar</option>
<option value="">Akvaryum Balıkları</option>
<option value="">Aksesuarlar</option>
<option value="">Yem ve Mama</option>
<option value="">Kümes Hayvanları</option>
<option value="">Büyükbaş Hayvanlar</option>
<option value="">Küçükbaş Hayvanlar</option>
<option value="">Deniz Canlıları</option>
<option value="">Sürüngenler</option>
<option value="">Böcekler</option>
<option value="">Bakım</option>
</select>
<select id="konut" class="kategori_element" size="2" onChange="konut(this);" style="display:none;">
<option value="satilik">Satılık</option>
<option value="kiralik">Kiralık</option>
<option value="gunluk_kiralik">Günlük Kiralık</option>
</select>
<select id="satilik" class="kategori_element" size="2" onChange="satilik(this);" style="display:none;">
<option value="daire">Daire</option>
<option value="residence">Residence</option>
<option value="mustakil_ev">Müstakil Ev</option>
<option value="villa">Villa</option>
<option value="ciftlik_evi">Çiftlik Evi</option>
<option value="kosk_konak">Köşk & Konak</option>
<option value="yali">Yalı</option>
<option value="yali_dairesi">Yalı Dairesi</option>
<option value="yazlik">Yazlık</option>
<option value="prefabrik_ev">Prefabrik Ev</option>
<option value="kooperatif">Kooperatif</option>
<button type="submit">İlan Ver</button>
</select>
</form>
My form is not working when i add form tag to start and to end i want create a category selector for e-trade webpage. i dont know which one is wrong java script or html please help.
why i cant type my message it want soo much detail.

Your problem isn't obvious (as you haven't really paired down your code to anything that we can use).
Here's three things that potentially could be causing your issues:
You lack name attributes to a lot of your elements. If the form successfully submits, then if an element doesn't have a name attribute, you won't actually get any data appearing.
A lot of your options have value="". This means that if you successfully send that data in a POST request, then whatever is selected in that option box will only return "". This will be of absolutely 0 help to anyone.
Not technically an issue that is likely to be causing your issues, but you need to get your head around loops. As it stands, the vast majority of your code is just you repeating yourself. An example for you to look at that would replace your kategori javascript function:
Code:
function kategori(dropdown) {
var value = dropdown.options[dropdown.selectedIndex].value,
list = ["emlak", "vasita", "alisveris", "is_makineleri_sanayi", "hizmet", "kariyer", "hayvanlar_alemi"];
for (var x=0; x<list.length; x++){
document.getElementById(list[x]).style.display = (list[x]==value?"block":"none");
}
}

Display div if a specific select option value is selected

I am trying to display a div if user select a specific option value from a select drop down list.
Example:
The select drop down list consist of dynamic names fetched from the database and also one static or permanent name at the bottom of the list called "Admin"
If user select an option that's not "Admin", a div containing certain form element is shown else if the user select "Admin" that div remain hidden
Here is my code:
Javascript -
<script language="javascript">
function admSelectCheck(nameSelect)
{
if(nameSelect){
admOptionValue = document.getElementById("admOption").value;
if(admOptionValue != 0){
document.getElementById("admDivCheck").style.display = "";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
</script>
HTML -
<select id="getFname" onchange="admSelectCheck(this.select);">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option id="admOption" value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
admin selected
</div>
Would be glad getting help with this.

Using this.select is incorrect.
Here is the correct code:
HTML
<select id="getFname" onchange="admSelectCheck(this);">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option id="admOption" value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
admin selected
</div>
JS
function admSelectCheck(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
admOptionValue = document.getElementById("admOption").value;
if(admOptionValue == nameSelect.value){
document.getElementById("admDivCheck").style.display = "block";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
See the demo on JSFiddle.

I think you need like this
Just Change this line:
JS
admOptionValue = document.getElementById("getFname").value;
//alert(admOptionValue);
if(admOptionValue == 0){
document.getElementById("admDivCheck").style.display = "";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
And also in HTML
onchange="admSelectCheck(this);"
see Demo

try this:
JS:
function admSelectCheck(nameSelect)
{
if(nameSelect){
admOptionValue = nameSelect.value;
if(admOptionValue != 0){
nameSelect.style.display = "";
}
else{
nameSelect.style.display = "none";
}
}
else{
nameSelect.style.display = "none";
}
}
HTML:
<select id="getFname" onchange="admSelectCheck(this);">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option id="admOption" value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
admin selected
</div>

Try
<select id="getFname" onchange="admSelectCheck(this);">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option id="admOption" value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
admin selected
</div>
And
function admSelectCheck(nameSelect)
{
var val = nameSelect.options[nameSelect.selectedIndex].value;
document.getElementById("admDivCheck").style.display = val == '0' ? "block" : 'none';
}
Demo: Fiddle

You can attach change event handler on body load event and hide/unhide <div> based on selection:
HTML
<select id="getFname">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option id="admOption" value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
admin selected
</div>
Put the following code in Head tag:
<script type="text/javascript">
function onload() {
document.getElementById("getFname").onchange = function (e) {
if (this.value == 0) {
document.getElementById("admDivCheck").style.display="";
} else {
document.getElementById("admDivCheck").style.display="none";
}
};
}
</script>
Call the onload function in body:
<body onload="onload()">
jsfiddle demo

Change this.select to this:
<select id="getFname" onchange="admSelectCheck(this);">
Then it should work okay. Also if you have jQuery you can simply do:
$("#getFname").change(function() {
var val = $(this).text();
if (val != "Admin") {
$("#div").show();
}
});
Will supply a pure JS function too.

<select id="getFname">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
admin selected
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$("#getFname").on("change",function(){"0"===$(this).val()?$("#admDivCheck").show():$("#admDivCheck").hide()});
</script>
Demo: https://jsfiddle.net/kingtaherkings/swzmxkej/

We Keep Coding

JavaScript is the programming language of the Web.

dropdown option and action - javascript

Related

show/hide section in wordpress with select values

How to get a dropbox to show options in another dropbox

Show textarea if selected item in listbox changes

Form is not working [closed]

Display div if a specific select option value is selected

Categories

Resources