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

Question

我有一个网站，允许用户猜测/预测＆＃34;体育比赛的结果

为了让您了解我想要实现的目标，请查看以下图片：

选定的小组会显示在页面底部及其分数（正如您在图像的底部圆圈中看到的那样）

我想做什么

1. 正如您在第1个圆圈中看到的那样，所选分数为0 （零）因此我希望选择单选按钮自动跳转到绘制

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

我的问题

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

我可以解决上述问题，但这会影响我脚本的主要工作，如上所述

任何想法如何解决上述问题而不影响上面解释的我的脚本的主要工作。

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

我的代码：

＆＃13;
＆＃13;
$(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/>');
    });
});
});
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 1

这就是我所做的：

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

以下示例似乎可以按您的要求运行。

        app.Use(async (context, next) =>
        {
            var sc = System.Threading.SynchronizationContext.Current;
            if (sc == null)
            {
                throw new Exception("SynchronizationContext is null");
            }

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