Change div content on selecting option from drop-down select

show hide div based on dropdown selection
show/hide div based on select option value jquery
show/hide div based on multiple dropdown selection
display content based on dropdown selection
change drop down options based on another dropdown javascript
display table based on dropdown selection html
jquery hide select option not working
show/hide dropdown option jquery

I'm using a jquery, html and css select template, and I added some other code to jquery so for every select option, a specific div is shown. As I'm new in jquery, I cant understand why this part does not function

Html is:

    <div class="center">
    <select name="sources" id="sources" class="custom-select sources" 
    placeholder="chose">
      <option value="profile">Profile</option>
      <option value="word">Word</option>
    </select>
    </div>
    <div id="ic">IC</div>
    <div id="passport">passport</div>

jquery is:

$(".custom-select").each(function() {
  var classes = $(this).attr("class"),
      id      = $(this).attr("id"),
      name    = $(this).attr("name");
  var template =  '<div class="' + classes + '">';
      template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>';
      template += '<div class="custom-options">';
      $(this).find("option").each(function() {
        template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
      });
  template += '</div></div>';

  $(this).wrap('<div class="custom-select-wrapper"></div>');
  $(this).hide();
  $(this).after(template);

});

$(".custom-option:first-of-type").hover(function() {
  $(this).parents(".custom-options").addClass("option-hover");
}, function() {
  $(this).parents(".custom-options").removeClass("option-hover");
});

$(".custom-select-trigger").on("click", function() {
  $('html').one('click',function() {
    $(".custom-select").removeClass("opened");
  });
  $(this).parents(".custom-select").toggleClass("opened");
  event.stopPropagation();
});

$(".custom-option").on("click", function() {
  $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
  $(this).parents(".custom-options").find(".custom-option").removeClass("selection");
  $(this).addClass("selection");
  $(this).parents(".custom-select").removeClass("opened");
  $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());
});

$("#sources").on("change", function() {
  if(this.value == "profile") {
    $("#ic").show();
    $("#passport").hide();
  } else {
    $("#ic").hide();
    $("#passport").show();
  }
});

CSS is:

body {
  background: #ededed;
  font-family: 'Open Sans', sans-serif;
}
.center {
  position: absolute;
  display: inline-block;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

#ic, #passport { display: none; }

/** Custom Select **/
.custom-select-wrapper {
  position: relative;
  display: inline-block;
  user-select: none;
}
  .custom-select-wrapper select {
    display: none;
  }
  .custom-select {
    position: relative;
    display: inline-block;
  }
    .custom-select-trigger {
      position: relative;
      display: block;
      width: 130px;
      padding: 0 84px 0 22px;
      font-size: 22px;
      font-weight: 300;
      color: #fff;
      line-height: 60px;
      background: #5c9cd8;
      border-radius: 4px;
      cursor: pointer;
      text-align: center;
    }
      .custom-select-trigger:after {
        position: absolute;
        display: block;
        content: '';
        width: 10px; height: 10px;
        top: 50%; right: 25px;
        margin-top: -3px;
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
        transform: rotate(45deg) translateY(-50%);
        transition: all .4s ease-in-out;
        transform-origin: 50% 0;
      }
      .custom-select.opened .custom-select-trigger:after {
        margin-top: 3px;
        transform: rotate(-135deg) translateY(-50%);
      }
  .custom-options {
    position: absolute;
    display: block;
    top: 100%; left: 0; right: 0;
    min-width: 100%;
    margin: 15px 0;
    border: 1px solid #b5b5b5;
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: 0 2px 1px rgba(0,0,0,.07);
    background: #fff;
    transition: all .4s ease-in-out;
    text-align: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-15px);
  }
  .custom-select.opened .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
  }
    .custom-options:before {
      position: absolute;
      display: block;
      content: '';
      bottom: 100%; right: 25px;
      width: 7px; height: 7px;
      margin-bottom: -4px;
      border-top: 1px solid #b5b5b5;
      border-left: 1px solid #b5b5b5;
      background: #fff;
      transform: rotate(45deg);
      transition: all .4s ease-in-out;
    }
    .option-hover:before {
      background: #f9f9f9;
    }
    .custom-option {
      position: relative;
      display: block;
      padding: 0 22px;
      border-bottom: 1px solid #b5b5b5;
      font-size: 18px;
      font-weight: 600;
      color: #b5b5b5;
      line-height: 47px;
      cursor: pointer;
      transition: all .4s ease-in-out;
    }
    .custom-option:first-of-type {
      border-radius: 4px 4px 0 0;
    }
    .custom-option:last-of-type {
      border-bottom: 0;
      border-radius: 0 0 4px 4px;
    }
    .custom-option:hover,
    .custom-option.selection {
      background: #f9f9f9;
    }

the last part of jquery code (.on ("chnge")) is what i added but no results. I expect when Profile is chosen the ic div is shown, else the other div is shown. thank you.

The problem is that you are not triggering the change event of the HTML select anymore. As you changed and added a custom select.

You can move your if statement inside the click function on the custom-option and show/hide the divs there.

See below ( i also added some code comments ).

In the if be sure to change from $(this).value to $(this).data('value') as you are selecting the data-value attribute of the custom-option

I won't get into the code itself but it would need some refactoring.

$(".custom-select").each(function() {
  var classes = $(this).attr("class"),
      id      = $(this).attr("id"),
      name    = $(this).attr("name");

  var template =  '<div class="' + classes + '">';
      template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>';
      template += '<div class="custom-options">';
      $(this).find("option").each(function() {
        //  $(this).attr("class") will return undefined because this = option and options do not have class
        template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
      });
  template += '</div></div>';

  $(this).wrap('<div class="custom-select-wrapper"></div>');
  $(this).hide();
  $(this).after(template);

});

$(".custom-option:first-of-type").hover(function() {
  $(this).parents(".custom-options").addClass("option-hover");
}, function() {
  $(this).parents(".custom-options").removeClass("option-hover");
});

$(".custom-select-trigger").on("click", function() {
  $('html').one('click',function() {
    $(".custom-select").removeClass("opened");
  });
  $(this).parents(".custom-select").toggleClass("opened");
  event.stopPropagation();
});

$(".custom-option").on("click", function() {
  $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
  $(this).parents(".custom-options").find(".custom-option").removeClass("selection");
  $(this).addClass("selection");
  $(this).parents(".custom-select").removeClass("opened");
  $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());
  
  //change 
   //if($(this).data("value") === "profile") {
    // $("#ic").show();
     //$("#passport").hide();
   //} else {
     //$("#ic").hide();
     //$("#passport").show();
   //}
   
    // in case of switch
    switch($(this).data("value")) {
      case 'profile':
       $("#ic").show();
       $(".custom-content:not(#ic)").hide()
      break;
      case 'example':
       $("#exampleId").show();
       $(".custom-content:not(#exampleId)").hide()
      break;
      default:
        $(".custom-content:not(#passport)").hide()
        $("#passport").show();
     }
    
});

$(".sources").on("change", function() {
	// this is not getting triggered
});
body {
  background: #ededed;
  font-family: 'Open Sans', sans-serif;
}
.center {
  position: absolute;
  display: inline-block;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/*#ic, #passport { display: none; }*/
.custom-content { display: none}

/** Custom Select **/
.custom-select-wrapper {
  position: relative;
  display: inline-block;
  user-select: none;
}
  .custom-select-wrapper select {
    display: none;
  }
  .custom-select {
    position: relative;
    display: inline-block;
  }
    .custom-select-trigger {
      position: relative;
      display: block;
      width: 130px;
      padding: 0 84px 0 22px;
      font-size: 22px;
      font-weight: 300;
      color: #fff;
      line-height: 60px;
      background: #5c9cd8;
      border-radius: 4px;
      cursor: pointer;
      text-align: center;
    }
      .custom-select-trigger:after {
        position: absolute;
        display: block;
        content: '';
        width: 10px; height: 10px;
        top: 50%; right: 25px;
        margin-top: -3px;
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
        transform: rotate(45deg) translateY(-50%);
        transition: all .4s ease-in-out;
        transform-origin: 50% 0;
      }
      .custom-select.opened .custom-select-trigger:after {
        margin-top: 3px;
        transform: rotate(-135deg) translateY(-50%);
      }
  .custom-options {
    position: absolute;
    display: block;
    top: 100%; left: 0; right: 0;
    min-width: 100%;
    margin: 15px 0;
    border: 1px solid #b5b5b5;
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: 0 2px 1px rgba(0,0,0,.07);
    background: #fff;
    transition: all .4s ease-in-out;
    text-align: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-15px);
  }
  .custom-select.opened .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
  }
    .custom-options:before {
      position: absolute;
      display: block;
      content: '';
      bottom: 100%; right: 25px;
      width: 7px; height: 7px;
      margin-bottom: -4px;
      border-top: 1px solid #b5b5b5;
      border-left: 1px solid #b5b5b5;
      background: #fff;
      transform: rotate(45deg);
      transition: all .4s ease-in-out;
    }
    .option-hover:before {
      background: #f9f9f9;
    }
    .custom-option {
      position: relative;
      display: block;
      padding: 0 22px;
      border-bottom: 1px solid #b5b5b5;
      font-size: 18px;
      font-weight: 600;
      color: #b5b5b5;
      line-height: 47px;
      cursor: pointer;
      transition: all .4s ease-in-out;
    }
    .custom-option:first-of-type {
      border-radius: 4px 4px 0 0;
    }
    .custom-option:last-of-type {
      border-bottom: 0;
      border-radius: 0 0 4px 4px;
    }
    .custom-option:hover,
    .custom-option.selection {
      background: #f9f9f9;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="center">
  <select name="sources" id="sources" class="custom-select sources" placeholder="chose">
      <option value="profile">Profile</option>
      <option value="example">Example</option>
      <option value="word">Word</option>
    </select>
</div>
<div class="custom-content" id="ic">IC</div>
<div class="custom-content" id="exampleId">Example</div>
<div class="custom-content" id="passport">passport</div>

Change div content on selecting option from drop-down select , 3 Answers. The problem is that you are not triggering the change event of the HTML select anymore. As you changed and added a custom select. You can move your if statement inside the click function on the custom-option and show/hide the divs there. Trying to display only <div> that matches the dropdown boxes selected in the form.. The form gets generated using a Form class, and options are in tables in the

You can just move your onchange code to click function. Bcs basically you don't change select directly but using code inside click function.

$(".custom-option").on("click", function() {
  $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
  $(this).parents(".custom-options").find(".custom-option").removeClass("selection");
  $(this).addClass("selection");
  $(this).parents(".custom-select").removeClass("opened");
  $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());

  if($(this).data("value") == "profile") {
    $("#ic").show();
    $("#passport").hide();
  } else {
    $("#ic").hide();
    $("#passport").show();
  }
});

Show Hide DIV Based on Dropdown Selection in jQuery, Answer: Use the jQuery change() method The following example will demonstrate you how to show and hide div elements based on the dropdown selection or selected option in a select box using the jQuery change() method in combination with the show() and hide() methods. Answer: Use the jQuery change () method. The following example will demonstrate you how to show and hide div elements based on the dropdown selection or selected option in a select box using the jQuery change () method in combination with the show () and hide () methods. The div boxes in this example are hidden by default using the CSS display property which value is set to none.

You are creating customized select for better visualization, pls find the codepen link as the result you expected.

$(".custom-select").each(function() {
  var classes = $(this).attr("class"),
    id = $(this).attr("id"),
    name = $(this).attr("name");
  var template = '<div class="' + classes + '">';
  template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>';
  template += '<div class="custom-options">';
  $(this).find("option").each(function() {
    template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
  });
  template += '</div></div>';

  $(this).wrap('<div class="custom-select-wrapper"></div>');
  $(this).hide();
  $(this).after(template);

});

$(".custom-option:first-of-type").hover(function() {
  $(this).parents(".custom-options").addClass("option-hover");
}, function() {
  $(this).parents(".custom-options").removeClass("option-hover");
});

$(".custom-select-trigger").on("click", function() {
  $('html').one('click', function() {
    $(".custom-select").removeClass("opened");
  });
  $(this).parents(".custom-select").toggleClass("opened");
  event.stopPropagation();
});

$(".custom-option").on("click", function() {
  $(this).parents(".custom-select-wrapper").find("select option:selected").val($(this).data("value"));
  console.log($(this).parents(".custom-select-wrapper").find("select").val($(this).data("value")))
  $(this).parents(".custom-options").find(".custom-option").removeClass("selection");
  $(this).addClass("selection");
  $(this).parents(".custom-select").removeClass("opened");
  var sel = $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());
  console.log($(sel).text())
  if ($(sel).text() == "Profile") {
    $("#ic").show();
    $("#passport").hide();
  } else {
    $("#ic").hide();
    $("#passport").show();
  }
});
.container {
  margin-top: 25px;
}

body {
  background: #ededed;
  font-family: 'Open Sans', sans-serif;
}

.center {
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#ic,
#passport {
  display: none;
}


/** Custom Select **/

.custom-select-wrapper {
  position: relative;
  display: inline-block;
  user-select: none;
}

.custom-select-wrapper select {
  display: none;
}

.custom-select {
  position: relative;
  display: inline-block;
}

.custom-select-trigger {
  position: relative;
  display: block;
  width: 130px;
  padding: 0 84px 0 22px;
  font-size: 22px;
  font-weight: 300;
  color: #fff;
  line-height: 60px;
  background: #5c9cd8;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}

.custom-select-trigger:after {
  position: absolute;
  display: block;
  content: '';
  width: 10px;
  height: 10px;
  top: 50%;
  right: 25px;
  margin-top: -3px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg) translateY(-50%);
  transition: all .4s ease-in-out;
  transform-origin: 50% 0;
}

.custom-select.opened .custom-select-trigger:after {
  margin-top: 3px;
  transform: rotate(-135deg) translateY(-50%);
}

.custom-options {
  position: absolute;
  display: block;
  top: 100%;
  left: 0;
  right: 0;
  min-width: 100%;
  margin: 15px 0;
  border: 1px solid #b5b5b5;
  border-radius: 4px;
  box-sizing: border-box;
  box-shadow: 0 2px 1px rgba(0, 0, 0, .07);
  background: #fff;
  transition: all .4s ease-in-out;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-15px);
}

.custom-select.opened .custom-options {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateY(0);
}

.custom-options:before {
  position: absolute;
  display: block;
  content: '';
  bottom: 100%;
  right: 25px;
  width: 7px;
  height: 7px;
  margin-bottom: -4px;
  border-top: 1px solid #b5b5b5;
  border-left: 1px solid #b5b5b5;
  background: #fff;
  transform: rotate(45deg);
  transition: all .4s ease-in-out;
}

.option-hover:before {
  background: #f9f9f9;
}

.custom-option {
  position: relative;
  display: block;
  padding: 0 22px;
  border-bottom: 1px solid #b5b5b5;
  font-size: 18px;
  font-weight: 600;
  color: #b5b5b5;
  line-height: 47px;
  cursor: pointer;
  transition: all .4s ease-in-out;
}

.custom-option:first-of-type {
  border-radius: 4px 4px 0 0;
}

.custom-option:last-of-type {
  border-bottom: 0;
  border-radius: 0 0 4px 4px;
}

.custom-option:hover,
.custom-option.selection {
  background: #f9f9f9;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" type="text/css" />

<div class="container">
  <div class="center">
    <select name="sources" id="sources" class="custom-select sources" placeholder="chose">
      <option value="profile">Profile</option>
      <option value="word">Word</option>
    </select>
  </div>
  <div id="ic">IC</div>
  <div id="passport">passport</div>
</div>

:selected Selector, Attaches a change event to the select that gets the text for each selected option and writes them in the div. It then triggers the event for the initial text draw. Here Mudassar Ahmed Khan has explained with an example, how to show and hide HTML DIV with TextBox based on DropDownList (HTML SELECT) selected value (selection) using JavaScript and jQuery. When an option is selected in DropDownList then based on its selected value (selection), the HTML DIV with TextBox will be shown or hidden. TAGs: jQuery, DropDownList, Div

Display other data based on dropdown selection - JavaScript, html("You selected: " + selected);. What this does is assign the value of the selected option element to a variable, then set the innerHTML of the results <div> � Questions: I am trying to create a macro which pulls a report from a website and this has four drop-down lists to select values. I am able to login to the page and direct myself to the report page, but for some reason am having trouble with the drop-down lists.

SCR19: Using an onchange event on a select element without , The second select element will contain a partial list of countries located in the selected When the continent selection changes, the items in the country select are <title>Dynamic Select Statements</title> <script type="text/javascript"> //<! you can use append() for adding an element and :selected text for the icon.. And if you want to add a <li> element, wrap it into <ul>. Stack Snippet

How to display div elements using Dropdown Menu in jQuery , In order to display data/content of a specific element by selecting the particular Selector name for dropdown menu is same as the element which is used to display option value = "Python" >Python</ option > .css() method: This method in JQuery is used to change style property of the selected element. The "select" is indeed cloned (BTW, twice for some reason, which is another question) Using JQuery to clone a “select” - selecting an option from the drop down does nothing - jQuery Forum Loading

Comments
  • Make sure your DOM is loaded before your script. If the event is registrated before the DOM is loaded, your event can't be fired
  • It looks like your replacing the select with your own drop-down. Therefore you're not changing the select value so this code $("#sources").on("change", never fires. You need to hook into the replacement's "select", probably $(".custom-option").on("click",
  • Thank you Mihai T, you helped me a lot.
  • @MariaFabianHernandes if this solved your question. Please rate/accept my answer. Thank you. Glad i could help. Cheers :D
  • one question Miahi, what if I chose to use switch in stead of if-else, in case I gain the number of options, how should I put it?
  • @MariaFabianHernandes i edited my answer using a switch statement ( commented out the if statement )
  • @MariaFabianHernandes Glad i could help.