Jquery change selectbox value based on radio button value (or other way round)

Question

I have a site that allows users to "guess / predict" the result of a sports match

To give you an idea what I am trying to achieve have a look at the following image:

The selected teams gets displayed at the bottom of the page along with their scores (as you can see on the bottom circle of the image)

What Im trying to do

1. As you can see in 1st circle the selected score is 0 (zero) thus I would like the radio button selected to automatically jump to draw

2. In the second circle the user selected draw by 12 points, in that case I would like the selectbox value to automatically default to zero or disp appropriate message

My Problem

My Script below displays the selected team and selected score inside a div at the bottom of page

I can get the above described problem to work but that in turn affects the primary working of my script, explained above

Any idea how I can solve above problem without affecting the primary working of my script explained above.

Please play around with my code snippet to get an idea of my problem

My Code:

$(document).ready(function () {
$(':radio, select').change(function (e) {
    //clear the div
    $('#dispPicks').html('');
    //update the 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>

Answer 1

This is what I did:

$(document).ready(function () {
    $(':radio').change(function (e) {
        //clear the div
        $('#dispPicks').html('');
        //update the div

        if ($(this).val() == "Draw") {
            $(this).siblings("select").val('0');
        }

        $(':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/>');
        });
    });

    $("select").change(function () {
        //clear the div
        $('#dispPicks').html('');
        //update the div
        if ($(this).val() == '') {
            if ($(this).siblings("input[type='radio']:checked").val() != "Draw") {
                $(this).siblings("input[type='radio']").last().prop('checked', true);
            }
        }
        if($(':radio:checked').val()=="Draw"){
            $(this).val('0');
        }
        $(':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/>');
        });
    });


});

Have a look at the JSFiddle demo

Answer 2

Below example seems to work as you 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 for draw condition
		if($(this).val() == '' ){
			//Change team/draw radios to draw
			theRadios.filter(':input[value="Draw"]').prop('checked', true);
		
		//Select indicates it is not a draw, clear draw status
		}else if(theRadios.filter(':checked').val() == "Draw"){
			theRadios.prop('checked', false);
		}
		updateDiv();
	});
});

/*
* (re)draw the div HTML
*/
function updateDiv(){
	//clear the div
	$('#dispPicks').html('');
	//update the 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>