jquery - Listening to Select Menu and display Result: Javascript -
i using shopify, in case haven't used it, question should able answered in javascript, nice if have shopify knowledge.
i have select options. whenever option selected, want option displayed. need updated depending on user selects. not sure how achieve javascript.
<select name="car" id="select"> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="mercedes">mercedes</option> <option value="audi">audi</option> </select> <select name="color" id="select-one"> <option value="volvo">red</option> <option value="saab">oj</option> <option value="mercedes">purp</option> <option value="audi">black</option> </select> <div class="show"> here option selected, color: "car" "color" </div>
first of don't duplicate id in both select-box. secondly can use onchange event of javascript this:
<select name="car" class="car"> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="mercedes">mercedes</option> <option value="audi">audi</option> </select> <select name="color" class="color"> <option value="volvo">red</option> <option value="saab">oj</option> <option value="mercedes">purp</option> <option value="audi">black</option> </select> <div class="show"> here option selected, color: "<div id="selected_car">car</div>" "<div id="selected_color">color</div>" </div> <script> $('select').change(function(){ if($(this).hasclass('car')){ $('#selected_car').html(""); $('#selected_car').html($('option:selected',this).text()); }else{ $('#selected_color').html(""); $('#selected_color').text($('option:selected',this).text()); } }); </script>
Comments
Post a Comment