on option select show div and hide others

Question

I'm working on a part of code with select option value and would like to show specific div on change and hide others. But I can't make it work, here is my code.

I don't understand why the div does not appear in the first example contrary to the second one.

My goal is to have tabs and add select option in tab 1 and divs in tab 2, and when I select an option in tab 1, it shows the result in tab 2 automatically. I hope I was clear.

 jQuery(function($) { $(".segment-select").Segment(); }); $(document).ready(function() { $(document).on("click", ".ui-segment span", function() { var value = $(this).attr('value'); $(".box").hide(); $(".box." + value).show(); }); $(".ui-segment span:first").click(); }); (function($) { $.fn.extend({ Segment: function() { $(this).each(function() { var self = $(this); var onchange = self.attr('onchange'); var wrapper = $("<div>", { class: "ui-segment" }); $(this).find("option").each(function() { var option = $("<span>", { class: 'option', onclick: onchange, text: $(this).text(), value: $(this).val() }); if ($(this).is(":selected")) { option.addClass("active"); } wrapper.append(option); }); wrapper.find("span.option").click(function() { wrapper.find("span.option").removeClass("active"); $(this).addClass("active"); self.val($(this).attr('value')); }); $(this).after(wrapper); $(this).hide(); }); } }); })(jQuery); 

 .ui-segment { color: rgb(0, 122, 255); border: 1px solid rgb(0, 122, 255); border-radius: 4px; display: inline-block; font-family: 'Lato', Georgia, Serif; } .ui-segment span.option.active { background-color: rgb(0, 122, 255); color: white; } .ui-segment span.option { font-size: 13px; padding-left: 23px; padding-right: 23px; height: 25px; text-align: center; display: inline-block; line-height: 25px; margin: 0px; float: left; cursor: pointer; border-right: 1px solid rgb(0, 122, 255); } .ui-segment span.option:last-child { border-right: none; } .segment-select { display: none; } body, html { height: 100%; margin: 0; -webkit-font-smoothing: antialiased; font-weight: 100; text-align: center; font-family: helvetica; } .tabs input[type=radio] { position: absolute; top: -9999px; left: -9999px; } .tabs { width: 650px; float: none; list-style: none; position: relative; padding: 0; margin: 75px auto; } .tabs li { float: left; } .tabs label { display: block; padding: 10px 20px; border-radius: 2px 2px 0 0; color: #08C; font-size: 24px; font-weight: normal; font-family: 'Lily Script One', helveti; background: rgba(255, 255, 255, 0.2); cursor: pointer; position: relative; top: 3px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .tabs label:hover { background: rgba(255, 255, 255, 0.5); top: 0; } [id^=tab]:checked+label { background: #ccc; color: white; top: 0; } [id^=tab]:checked~[id^=tab-content] { display: block; } .tab-content { z-index: 2; display: none; text-align: left; width: 100%; font-size: 20px; line-height: 140%; padding-top: 10px; background: #ccc; padding: 15px; color: white; position: absolute; top: 53px; left: 0; box-sizing: border-box; -webkit-animation-duration: 0.5s; -o-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <ul class="tabs"> <li> <input type="radio" checked name="tabs" id="tab1"> <label for="tab1">tab 1</label> <div id="tab-content1" class="tab-content animated fadeIn"> <select class="segment-select"> <option value="red" selected>Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select> </div> </li> <li> <input type="radio" name="tabs" id="tab2"> <label for="tab2">tab 2</label> <div id="tab-content2" class="tab-content animated fadeIn"> <div class="red box">red option</div> <div class="green box">green option</div> <div class="blue box">blue option</div> </div> </li> </ul> 

Answer 1

If you inspect the DOM, you will find that select box is getting converted to DIV->SPAN structure and show it as tabs. So here normal select box change event will not get triggered. You need to bind click event on spans and read value attribute and then apply logic to show and hide divs.

See below working snippet

 jQuery(function ($){ $(".segment-select").Segment(); }); $(document).ready(function(){ $(document).on("click",".ui-segment span",function(){ var value= $(this).attr('value'); $(".box").hide(); $(".box." + value).show(); }); $(".ui-segment span:first").click(); }); (function( $ ){ $.fn.extend({ Segment: function ( ) { $(this).each(function (){ var self = $(this); var onchange = self.attr('onchange'); var wrapper = $("<div>",{class: "ui-segment"}); $(this).find("option").each(function (){ var option = $("<span>",{class: 'option',onclick:onchange,text: $(this).text(),value: $(this).val()}); if ($(this).is(":selected")){ option.addClass("active"); } wrapper.append(option); }); wrapper.find("span.option").click(function (){ wrapper.find("span.option").removeClass("active"); $(this).addClass("active"); self.val($(this).attr('value')); }); $(this).after(wrapper); $(this).hide(); }); } }); })(jQuery); 

 .ui-segment{ color: rgb(0, 122, 255); border: 1px solid rgb(0, 122, 255); border-radius: 4px; display:inline-block; font-family: 'Lato',Georgia, Serif; } .ui-segment span.option.active{ background-color: rgb(0, 122, 255); color: white; } .ui-segment span.option{ font-size: 13px; padding-left: 23px; padding-right: 23px; height: 25px; text-align:center; display:inline-block; line-height: 25px; margin: 0px; float:left; cursor:pointer; border-right:1px solid rgb(0, 122, 255); } .ui-segment span.option:last-child{ border-right: none; } .segment-select{ display:none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <h1>EXAMPLE THAT I WANT BUT DOES NOT WORK</h1> <select class="segment-select"> <option value="red" selected>Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select> <div class="red box">red option</div> <div class="green box">green option</div> <div class="blue box">blue option</div> <h1>EXAMPLE WHO WORK</h1> <select> <option value="red" selected>Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select> <div class="red box">red option</div> <div class="green box">green option</div> <div class="blue box">blue option</div> <script type="text/javascript" src="segment.js"></script> </html>