Hide form when value from dropdown is chosen

Hide form when value from dropdown is chosen

By : user2949187
Date : November 16 2020, 06:23 AM
seems to work fine You can do it easyly using JavaScript, you need an ID for your rooms form and another ID for the product category drop down list, then you need add an event listener to hear the change event of your drop down:
code :
var ddl = document.getElementById('ddlProductCategory'),
    form = document.getElementById('roomsForm');

ddl.addEventListener('change', function(){
 if (this.value === '5'){
   form.style.display = 'none';
 else {
   form.style.display = 'block';
<div class="form-group" id="roomsForm">
  @Html.LabelFor(model => model.RoomsNumber, htmlAttributes: new { @class = "control-label col-md-2" })
  <div class="col-md-10">
    @Html.EditorFor(model => model.RoomsNumber, new { htmlAttributes = new { @class = "form-control" } })
    @Html.ValidationMessageFor(model => model.RoomsNumber, "", new { @class = "text-danger" })

<div class="form-group">
  @Html.LabelFor(model => model.ProductCategoryId, "Type of home", htmlAttributes: new { @class = "control-label col-md-2"})
  <div class="col-md-10">
    @Html.DropDownList("ProductCategoryId", null, htmlAttributes: new { @class = "form-control", id = 'ddlProductCategory" })
    @Html.ValidationMessageFor(model => model.ProductCategoryId, "", new { @class = "text-danger" })

Share : facebook icon twitter icon
jquery - hide css if select dropdown is chosen

jquery - hide css if select dropdown is chosen

By : Bunthoan Praknika
Date : March 29 2020, 07:55 AM
Hope this helps I have a dynamic form that creates drop downs and increments the names correctly. What i need to do is hide a text box if the user selects a certain dropdown value. This i can do, but what i need help on is hiding the right thing as the names are incremental. , Try this:
code :
$("select[id^=Profession]").change(function() {
 var id = $(this).attr('id').split('Profession')[1];
 if(jQuery(this).find("option:selected").val() == "2") {
 } else {
Hide and display HTML elements based on what was chosen in a dropdown

Hide and display HTML elements based on what was chosen in a dropdown

By : user1019427
Date : March 29 2020, 07:55 AM
To fix the issue you can do as mentioned by st3inn this.value is absolutely fine - there is just the typo by document.getElement==>B<==yId.
But your code has the disadvantage, that a user could select both options and so both sub-selections would be visible.
code :
function fctCheck(food) {
    var elems = document.getElementsByName("subselector");
        for (var i = 0; i < elems.length; i++) {
            elems.item(i).style.display = "none";
        document.getElementById(food).style.display = "block";
<select id="food"onchange="fctCheck(this.value);">
    <option value="">Choose an item</option>
    <option value="icecream">Ice cream</option>
    <option value="crisps">Crisps</option>

<select id="icecream" name="subselector" style="display:none">
    <option value="vanilla">Vanilla</option>
    <option value="chocolate">Chocolate</option>
    <option value="mint">Mint</option>

<select id="crisps" name="subselector" style="display:none">
    <option value="readysalted">Ready Salted</option>
    <option value="cheeseandonion">Cheese and Onion</option>
    <option value="saltandvinegar">Salt and Vinegar</option>
jquery chosen dropdown does not get updated for style change hide/show

jquery chosen dropdown does not get updated for style change hide/show

By : Jeff
Date : March 29 2020, 07:55 AM
it fixes the issue you dont set the id to choosen directly. The plugin automatically hide your select box and display the choosen.
code :
$("#sel_searchStatus + div.chosen-container").css("display", "none");
Hide Field when value is chosen from dropdown

Hide Field when value is chosen from dropdown

By : SQL novice
Date : March 29 2020, 07:55 AM
it helps some times 2 points.
you have 2 ids the same. label and the dropdown has id ddlRoleId. I assume you want the label for="ddlRoleId" instead of id="ddlRoleId"
code :
window.onload = function () {
    var ddl = document.getElementById('ddlRoleId'),
        Nickform = document.getElementById('Nick'),
        CompanyForm = document.getElementById('Company');
    ddl.addEventListener('change', function () {
        if (this.value === '1') {
            Nickform.style.display = 'none';
            CompanyForm.style.display = 'block';
        else {
            Nickform.style.display = 'block';
            CompanyForm.style.display = 'none';
        if (this.value === '2') {
            CompanyForm.style.display = 'none';
            Nickform.style.display = 'block';
        else {
            CompanyForm.style.display = 'block';
            Nickform.style.display = 'none';
How to hide or remove options from jQuery Chosen select dropdown

How to hide or remove options from jQuery Chosen select dropdown

By : Ahmed Ibrahim
Date : March 29 2020, 07:55 AM
seems to work fine I would like to hide certain elements from a dropdown that is created using the Chosen plugin. , In the original select you need to hide the option. For example:
Related Posts Related Posts :
  • How to change add and remove active class in JavaScript
  • how to toggle a specific div in javascript
  • How to get all the values from multiple keys of an array of object?
  • jQuery bind() unbind() and on() and off()
  • regular expression to find DD Month YYYY from a string
  • How to upload files from web client (HTML/jQuery form) to your Dropbox folder
  • Backbone history and require.js issue
  • Confusion over Classical and Prototypal Inheritance Javascript
  • How to take screen shot of current webpage using Javascript/JQuery?
  • Store meridiem in a variable
  • class declared inside closure vs standard class without closure
  • javascript confirm box always return true
  • dynamically changing the size of font size based on text length using css and html
  • Node.js - Getting the host IP address while on Amazon EC2
  • Confusing CSS, can anyone explain please
  • How to install v8-profiler on Windows 8 (64 bit) using npm?
  • Resolve promise based on another promise
  • google maps adding overlay layer above UI and markers
  • Style specific letter?
  • RangeError: Maximum call stack size exceeded with array.slice
  • node rest client get with local variable
  • If condition not executes while mouse move fastly
  • Count the number of displayed elements in a HTML list
  • Locate JavaScript source code in Emacs
  • Clean, Modular Code vs MV* Frameworks
  • infinite scroll without loading image
  • Backbone: reverse collection order with comparator
  • What do printers ignore?
  • jQuery UI .tabs() Contentless tab?
  • Execute Javascript alert() after page (visually) loaded
  • JavaScript - duplicating array doesn't work
  • Excessive clickable area below image
  • JavaScript Regex: Replace |b| with <b>
  • Unexpected value change in 2D array in JavaScript
  • Function doesnt see parameter as a array of objects
  • jQuery fetch keypress event on chrome and IE
  • How to enable jquery validate localization?
  • Cassandra map collection returned by node.js Helenus looks odd
  • angular ng-repeat with multiple filter options
  • Selecting Children without ID or Class names
  • How to uncheck a group of checkboxes when another checkbox is checked
  • Is hiding content by Javascript or jQuery Worth trying
  • Load XUL resource using javascript
  • XML to HTML text area from server file system
  • set focus() on textbox on form onload
  • es lint '' is assigned a value but never used' eventhough i have used it
  • Can "name" attribute be used for custom VueJS components
  • Get innerHTML of content when it is clicked
  • HTTPS causes CSS animations to not load? Very confused
  • How to hide other div apart from touched div to the band
  • Is global variable assignment atomic on NodeJS?
  • Datepicker onchangemonthyear beforeshowday
  • trying to render html files using jade but it still adresses it as a jade
  • Google Analytics - Understanding and Dissecting the Snippet: What is | | [ ];
  • Replacing "[aA09.b]." to "[aA09.b]\n" in in JavaScript
  • Why wrap a function definition in an immediate function?
  • Enable / disable jQuery script on switching to different tab in a HTML page
  • how can find return variable value outside anonymous function in node js mysql query function
  • Converting 1 to 0001 in javascript array
  • svg viewbox should not resize the text fontSize?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org