Jquery giá trị thay đổi selectbox dựa trên giá trị nút radio (hoặc chiều ngược lại)

Question

Tôi có một trang web cho phép người dùng "đoán/dự đoán" kết quả của một trận đấu thể thao

Để cung cấp cho bạn một ý tưởng những gì tôi đang cố gắng để đạt được có một cái nhìn vào hình ảnh sau đây:

các đội chọn được hiển thị ở dưới cùng của trang cùng với điểm số của họ (như bạn có thể nhìn thấy trên đường tròn đáy của hình ảnh)

gì Im cố gắng làm

1. Như bạn có thể thấy trong vòng tròn 1 số điểm chọn là 0 (zero) vì vậy tôi muốn các nút radio được chọn để tự động nhảy để vẽ

2. Trong vòng kết nối thứ hai, người dùng đã chọn vẽ 12 điểm, trong trường hợp đó tôi muốn giá trị hộp chọn để tự động mặc định là số hoặc gửi thông báo thích hợp

Vấn đề của tôi

My Script dưới đây hiển thị các nhóm được lựa chọn và số điểm được lựa chọn bên trong một div ở dưới cùng của trang

tôi có thể nhận được các vấn đề nêu trên để làm việc nhưng do đó ảnh hưởng đến hoạt động chính của tập lệnh của tôi, được giải thích ở trên

Bất kỳ ý tưởng nào về cách giải quyết vấn đề trên mà không ảnh hưởng đến pr Imary làm việc của kịch bản của tôi giải thích ở trên.

Hãy chơi xung quanh với đoạn mã của tôi để có được một ý tưởng về vấn đề của tôi

Mã của tôi:

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

Ví dụ bên dưới dường như hoạt động như bạn yêu cầu.

$(document).ready(function() { 
 

 
\t //Monitor change of team/draw 
 
\t $(':radio').change(function (e) { 
 
\t \t var selectBox = $(this).siblings("select"); 
 
\t \t if($(this).val() == "Draw" && selectBox.val() !== ''){ 
 
\t \t \t selectBox.val(''); 
 
\t \t } 
 
\t \t updateDiv(); 
 
\t }); 
 
\t 
 
\t //Monitor change of select 
 
\t $('select').change(function (e) { 
 
\t \t 
 
\t \t var theRadios = $(this).siblings(":radio"); 
 
\t \t 
 
\t \t //Check for draw condition 
 
\t \t if($(this).val() == ''){ 
 
\t \t \t //Change team/draw radios to draw 
 
\t \t \t theRadios.filter(':input[value="Draw"]').prop('checked', true); 
 
\t \t 
 
\t \t //Select indicates it is not a draw, clear draw status 
 
\t \t }else if(theRadios.filter(':checked').val() == "Draw"){ 
 
\t \t \t theRadios.prop('checked', false); 
 
\t \t } 
 
\t \t updateDiv(); 
 
\t }); 
 
}); 
 

 
/* 
 
* (re)draw the div HTML 
 
*/ 
 
function updateDiv(){ 
 
\t //clear the div 
 
\t $('#dispPicks').html(''); 
 
\t //update the div 
 
\t $(':radio:checked').each(function (ind, ele) { 
 
\t \t var selectBoxVal = $(this).closest('div.team').find('select').val(); 
 
\t \t selectBoxVal = selectBoxVal!=''? "By "+selectBoxVal:selectBoxVal; 
 
\t \t $('#dispPicks').append($(ele).val() +" "+selectBoxVal+ '<br/>'); 
 
\t }); 
 
}

<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 2

Đây là những gì tôi đã làm:

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