javascript - Multiple select value if statement jQuery -
i have 2 select menus , i'm trying compare selected value of 1 cannot conditional statement working, please see comments in code below , in jsfiddle.
here's code , jsfiddle:
the expected value #purpose
select menu "5". var selected
attempt @ grabbing value #purpose
select menu.
$('#purpose').on('change', function() { if ( this.value == '8') { $("#business").show(); $("#investor-type").hide(); } else { $("#business").hide(); $("#investor-type").show(); } }); var selected = $("#purpose option:selected", this).val(); $('#investor-type').on('change', function() { if ( this.value == '1') { $("#disclaimer-form").show(); $(".disclaimer-content").show(); // having trouble else if below } else if ( this.value == "2" && selected == "5") { $("#disclaimer-form").show(); $(".disclaimer-content").show(); } else { $("#disclaimer-form").hide(); $(".disclaimer-content").hide(); } });
1 . move selected inside change
$('#investor-type').on('change', function() { var selected = $("#purpose").val();
2 . test 5 inside 2
else if (this.value == "2") { $("#retailstatusyes").toggle(selected == "5"); $("#retailstatusno").toggle(selected != "5"); $("#prostatus").hide(); }
you need trigger change of investor type if user changes country.
here full version better var names using css hide initially
$(function() { // shows next select menu $('#purpose').on('change', function() { var other = this.value == '8'; $("#noaccess").toggle(other); $("#investor-type").toggle(!other); $('#investor-type').change(); }); $('#investor-type').on('change', function() { var selected = $("#purpose").val(), isdutch = selected == "5", ispro = this.value == "1", isretail = this.value == "2"; $("#prostatus").toggle(ispro); if (isretail) { $("#retailstatusyes").toggle(isdutch); $("#retailstatusno").toggle(!isdutch); } else { $("#retailstatusyes").hide(); $("#retailstatusno").hide(); } }); });
.invtype { display: none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <select id="purpose" class="left"> <option value="0">please choose country</option> <option value="1">austria</option> <option value="2">france</option> <option value="3">germany</option> <option value="4">italy</option> <option value="5">netherlands</option> <option value="6">spain</option> <option value="7">switzerland</option> <option value="8">other</option> </select> <select id="investor-type" class="left" style="display:none;"> <option value="0">investor type</option> <option value="1">professional investor</option> <option value="2">retail investor</option> </select> <div class="invtype" id="noaccess"> have selected other , cannot access next select menu. soz. </div> <div class="invtype" id="prostatus"> pro investor </div> <div class="invtype" id="retailstatusno"> retail investor not netherlands </div> <div class="invtype" id="retailstatusyes"> retail investor , netherlands. congrats. </div>
Comments
Post a Comment