Хотите показать/скрыть div на основе выбора выпадающего списка

Я хочу, чтобы jQuery show div id = 'business', только если в раскрывающемся списке выбран «бизнес».Хотите показать/скрыть div на основе выбора выпадающего списка

Это мой код:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$('#purpose').on('change', function() { 
    if (this.value == '1'); 
    { 
    $("#business").show(); 
    } 
    else 
    { 
    $("#business").hide(); 
    } 
}); 
}); 
</script> 
<body> 
<select id='purpose'> 
<option value="0">Personal use</option> 
<option value="1">Business use</option> 
<option value="2">Passing on to a client</option> 
</select> 
<div style='display:none;' id='business'>Business Name<br/>&nbsp; 
<br/>&nbsp; 
    <input type='text' class='text' name='business' value size='20' /> 
    <br/> 
</div> 
</body>

и JSFiddle: http://jsfiddle.net/2kGzZ/1/

источник

2014-02-05 user3263266

Wrap код внутри $(document).ready(function(){...........}); обработчика, а также удалить ; после if

$(document).ready(function(){ 
    $('#purpose').on('change', function() { 
     if (this.value == '1') 
     //.....................^....... 
     { 
     $("#business").show(); 
     } 
     else 
     { 
     $("#business").hide(); 
     } 
    }); 
});

Fiddle Demo

источник

2014-02-05 17:56:14

Или положить его в конец документа. – j08691

или делегирование события – Satpal

Спасибо за это! Он отлично работает сейчас :) – user3263266

у Вас есть ошибка в коде unexpected token .use:

$('#purpose').on('change', function() { 
    if (this.value == '1') { 
    $("#business").show(); 
    } else { 
    $("#business").hide(); 
    } 

    });

Demo

Update: Вы можете сузить код, используя .toggle()

$('#purpose').on('change', function() { 
    $("#business").toggle(this.value == '1'); 
});

источник

2014-02-05 17:58:36

Вам нужно либо положить ваши код в конце страницы или обернуть его в готовый вызов документа, иначе вы пытаетесь выполнить код на элементах, которые вы не используете t существует. Кроме того, вы можете уменьшить свой код:

$('#purpose').on('change', function() { 
    $("#business").css('display', (this.value == '1') ? 'block' : 'none'); 
});

jsFiddle example

источник

2014-02-05 17:58:57 j08691

Основная проблема заключается в JS ошибки:

$('#purpose').on('change', function() { 
    // if (this.value == '1'); { No semicolon and I used === instead of == 
    if (this.value === '1'){ 
     $("#business").show(); 
    } else { 
     $("#business").hide(); 
    } 
}); 
// }); remove

http://jsfiddle.net/Bushwazi/2kGzZ/3/

мне пришлось убирать HTML & js ... Я не мог с собой поделать.

HTML:

<select id='purpose'> 
    <option value="0">Personal use</option> 
    <option value="1">Business use</option> 
    <option value="2">Passing on to a client</option> 
</select> 
<form id="business"> 
    <label for="business">Business Name</label> 
    <input type='text' class='text' name='business' value size='20' /> 
</form>

CSS:

#business { 
    display:none; 
}

JS:

$('#purpose').on('change', function() { 
    if(this.value === "1"){ 
     $("#business").show(); 
    } else { 
     $("#business").hide(); 
    } 
});

источник

2014-02-05 18:05:37

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
    $('#purpose').on('change', function() { 
     if (this.value == '1') 
     //.....................^....... 
     { 
      $("#business_new").hide(); 
     $("#business").show(); 
     } 
     else if (this.value == '2') 
     { 
      $("#business").hide(); 
     $("#business_new").show(); 
     } 
     else 
     { 
     $("#business").hide(); 
     } 
    }); 
}); 
</script> 
<body> 
<select id='purpose'> 
<option value="0">Personal use</option> 
<option value="1">Business use</option> 
<option value="2">Passing on to a client</option> 
</select> 
<div style='display:none;' id='business'>Business Name<br/>&nbsp; 
<br/>&nbsp; 
    <input type='text' class='text' name='business' value size='20' /> 
    <input type='text' class='text' name='business' value size='20' /> 
    <br/> 
</div> 
<div style='display:none;' id='business_new'>Business Name<br/>&nbsp; 
<br/>&nbsp; 
    <input type='text' class='text' name='business' value="1254" size='20' /> 
    <input type='text' class='text' name='business' value size='20' /> 
    <br/> 
</div> 
</body>

источник

2015-06-11 04:30:31

попробовать это, который работает для меня в моей тестовой демо

<script> 
$(document).ready(function(){ 
$('#dropdown').change(function() 
{ 
// var selectedValue = parseInt(jQuery(this).val()); 
var text = $('#dropdown').val(); 
//alert("text"); 
    //Depend on Value i.e. 0 or 1 respective function gets called. 
    switch(text){ 
     case 'Reporting': 
      // alert("hello1"); 
    $("#td1").hide(); 
      break; 
     case 'Buyer': 
     //alert("hello"); 
    $("#td1").show(); 
      break; 
     //etc... 
     default: 
      alert("catch default"); 
      break; 
    } 
}); 
}); 

</script>

источник

2017-07-05 12:39:00 user8259249

утомительное решение ... –

Хотите показать/скрыть div на основе выбора выпадающего списка

ответ

Смежные вопросы