i have site allows users "guess / predict" result of sports match
to give idea trying achieve have @ following image:
the selected teams gets displayed @ bottom of page along scores (as can see on bottom circle of image)
what im trying do
as can see in 1st circle selected score 0 (zero) radio button selected automatically jump draw
in second circle user selected draw 12 points, in case selectbox value automatically default zero or disp appropriate message
my problem
my script below displays selected team , selected score inside div @ bottom of page
i can above described problem work in turn affects primary working of script, explained above
any idea how can solve above problem without affecting primary working of script explained above.
please play around code snippet idea of problem
my code:
$(document).ready(function () { $(':radio, select').change(function (e) { //clear div $('#disppicks').html(''); //update div $(':radio:checked').each(function (ind, ele) { var selectboxval = $(this).closest('div.team').find('select').val(); selectboxval = selectboxval!=''? "by "+selectboxval:selectboxval; $('#disppicks').append($(ele).val() +" "+selectboxval+ '<br/>'); }); }); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="team"> <input type="radio" name="foo" value="shaks" /> <input type="radio" name="foo" value="hurricanes" /> <input type="radio" name="foo" value="draw" /> <select> <option value="">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> <br/> </div> <div class="team"> <input type="radio" name="bar" value="crusaders" /> <input type="radio" name="bar" value="pioneers" /> <input type="radio" name="bar" value="draw" /> <select> <option value="">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> <br/> </div> <div class="team"> <input type="radio" name="wow" value="chelsea" /> <input type="radio" name="wow" value="liverpool" /> <input type="radio" name="wow" value="draw" /> <select> <option value="">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div id="disppicks"></div>
below example seems work requested.
$(document).ready(function () { //monitor change of team/draw $(':radio').change(function (e) { var selectbox = $(this).siblings("select"); if($(this).val() == "draw" && selectbox.val() !== ''){ selectbox.val(''); } updatediv(); }); //monitor change of select $('select').change(function (e) { var theradios = $(this).siblings(":radio"); //check draw condition if($(this).val() == '' ){ //change team/draw radios draw theradios.filter(':input[value="draw"]').prop('checked', true); //select indicates not draw, clear draw status }else if(theradios.filter(':checked').val() == "draw"){ theradios.prop('checked', false); } updatediv(); }); }); /* * (re)draw div html */ function updatediv(){ //clear div $('#disppicks').html(''); //update div $(':radio:checked').each(function (ind, ele) { var selectboxval = $(this).closest('div.team').find('select').val(); selectboxval = selectboxval!=''? "by "+selectboxval:selectboxval; $('#disppicks').append($(ele).val() +" "+selectboxval+ '<br/>'); }); }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="team"> <input type="radio" name="foo" value="shaks" /> <input type="radio" name="foo" value="hurricanes" /> <input type="radio" name="foo" value="draw" /> <select> <option value="">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> <br/> </div> <div class="team"> <input type="radio" name="bar" value="crusaders" /> <input type="radio" name="bar" value="pioneers" /> <input type="radio" name="bar" value="draw" /> <select> <option value="">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> <br/> </div> <div class="team"> <input type="radio" name="wow" value="chelsea" /> <input type="radio" name="wow" value="liverpool" /> <input type="radio" name="wow" value="draw" /> <select> <option value="">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div id="disppicks"></div>
Comments
Post a Comment