Trying to get a jQuery event to Fire onClick on a select/option form -
i have form, 1 of fields select field, 5 options. when 5th option clicked, want hidden div shown. want nothing happen other 4 clicked.
it works on firefox, no else. after researching little, seems chrome/ie don't let onclick firing select. far suggestions have been use onchange on select whole, haven't been able figure out fire code when 5th option clicked using onchange. appreciated.
custom proptions set display: none; default. want div id'd *custom_proptions* show when option id'd *custom_proptions_option* clicked, , want re-hide if shown first, , 1 of other options clicked.
<div class="proptions_container"> <select name="proptions" id="proptions" class="proptions"> <option value="0" class="default_proptions" id="choose_prompt">choose proptions…</option> <option value="1" class="default_proptions">yes <strong>or</strong> no</option> <option value="2" class="default_proptions">before <strong>or</strong> on/after</option> <option value="3" class="default_proptions">more <strong>or</strong> less than</option> <option value="4" class="default_proptions">better <strong>or</strong> worse</option> <option value="5" id="custom_proptions_option">a <strong>or</strong> b (customize below)</option> </select> <div id="custom_proptions"> <input name="proption_1" type="text" class="text" id="proption_1" placeholder="first proption" /> <span id="custom_or">or</span> <input name="proption_2" type="text" class="text" id="proption_2" placeholder="second proption" /> </div> <script> $('option#custom_proptions_option').click(function() { $('div#custom_proptions').slidedown('slow'); }); $('option.default_proptions').click(function() { $('div#custom_proptions').slideup('slow'); }); </script> </div>
do in change event, desired value:
<script> $('#proptions').change(function() { if ($(this).find(':selected').val() === '5') { $('div#custom_proptions').slidedown('slow'); } else { $('div#custom_proptions').slideup('slow'); } }); </script>
Comments
Post a Comment