Jquery根据单选按钮值(或其他方式)更改selectbox值

Question

我有一个网站,允许用户"猜测/预测"体育比赛的结果

为了让您了解我想要实现的目标,请查看以下图像:

选定的团队将显示在页面底部及其分数(如图所示,您可以在图像的底部圆圈上看到)

我想做什么

1. 正如您在第一个圆圈中看到的那样,所选分数为0(零),因此我希望选中的单选按钮自动跳转到绘图

2. 在第二个圆圈中,用户选择绘制了12个点,在这种情况下,我希望selectbox值自动默认为零或显示相应的消息

我的问题

下面的"我的脚本"在页面底部的div中显示所选团队和所选分数

我可以让上述问题起作用,但这又会影响我脚本的主要工作,如上所述

知道如何在不影响上面解释的脚本的主要工作的情况下解决上述问题.

请使用我的代码片段来了解我的问题

我的代码:

$(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

下面的示例似乎可以按您的要求工作。

$(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>