Jquery valore di cambiamento selectbox in base al valore pulsante di scelta (o viceversa)

Question

Ho un sito che permette agli utenti di "indovinare/prevedere" il risultato di una partita di sport

Per darvi un'idea di ciò che sto cercando per raggiungere dare un'occhiata al seguente immagine:

le squadre selezionate ottiene visualizzata nella parte inferiore della pagina con i loro punteggi (come si può vedere sul cerchio inferiore dell'immagine)

cosa im cercando di fare

1. Come si può vedere nel primo cerchio il punteggio selezionato è 0 (zero) quindi vorrei che il pulsante di radio selezionata automaticamente passare a disegnare

2. Nel secondo cerchio l'utente ha selezionato disegno da 12 punti, in tal caso mi piacerebbe che il valore della casella di selezione fosse automaticamente impostato sullo zero o sul messaggio appropriato

mio problema

mio script di sotto visualizza la squadra selezionata e punteggio selezionato all'interno di un div nella parte inferiore della pagina di

posso ottenere il problema descritto in precedenza al lavoro, ma che a sua volta influisce sul funzionamento primario del mio script, spiegato sopra

Qualche idea su come posso risolvere il problema senza influire sul pr lavoro imminente del mio script spiegato sopra.

Si prega di giocare con il mio frammento di codice per avere un'idea del mio problema

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

L'esempio seguente sembra funzionare come richiesto.

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

Questo è quello che ho fatto:

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