大佬教程收集整理的这篇文章主要介绍了javascript – Jquery根据单选按钮值(或其他方式)更改selectbox值，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
为了让您了解我想要实现的目标,请查看以下图像：
选定的团队将显示在页面底部及其分数(如图所示,您可以在图像的底部圆圈上看到)
我想做什么
>正如您在第一个圆圈中看到的那样,所选分数为0(零),因此我希望选中的单选按钮自动跳转到绘图
>在第二个圆圈中,用户选择绘制了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>
$(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>
以上是大佬教程为你收集整理的javascript – Jquery根据单选按钮值(或其他方式)更改selectbox值全部内容，希望文章能够帮你解决javascript – Jquery根据单选按钮值(或其他方式)更改selectbox值所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。