How to select a selectbox an option value with JS?

Question

This may sound easy but I'm been having a heck of a time to get this to work. Somebody please help. My select box is like below. How do i select the value 3 from the list?

        if(!empty($listeDoc))
        {
            $iGroups = 0;
            while($iGroups < count($listeDoc))
            {
            ?>  
            <tr>
                <td>
                    <input type="checkbox" name="productSelect[<?php echo $listeDoc[$iGroups]->DOC_CLIENT_ID ?>]['product_id']" id="productSelectCreation_<?php echo $listeDoc[$iGroups]->DOC_CLIENT_ID ?>" onchange="setValueToOne(this)"  ><?php echo $listeDoc[$iGroups]->DOC_CLIENT_NOM; ?>
                </td>

                <td>
                    <select name="productSelect[<?php echo $listeDoc[$iGroups]->DOC_CLIENT_ID ?>]['quantity']" id="productQty_<?php echo $listeDoc[$iGroups]->DOC_CLIENT_ID ?>" class="form-control1" value="<?php echo $qty; ?>" style="width:100%; height:25px; border : #62270c solid 1px;" tabindex="1">
                        <option value=""/></option>
                        <option value="1"<?php if ($qty == 1) echo 'selected="selected"'; ?>>1</option>
                        <option value="2"<?php if ($qty == 2) echo 'selected="selected"'; ?>>2</option>
                        <option value="3"<?php if ($qty == 3) echo 'selected="selected"'; ?>>3</option>
                        <option value="4"<?php if ($qty == 4) echo 'selected="selected"'; ?>>4</option>
                        <option value="5"<?php if ($qty == 5) echo 'selected="selected"'; ?>>5</option>
                    </select>
                <td>
            </tr>

            <?php
            $iGroups++;
            }
        }

here's is what i tried:

function setValueToOne(value) { checkbox = document.getElementById('productSelectCreation');

if (checkbox.checked == true)
{
    document.getElementById("productQtyCreation").value = 1;
}
else
    document.getElementById("productQtyCreation").value = '0';

}

Answer 1

If I understand correctly you want to change the select box selected option using vanilla javascript. You will need to loop the selectbox and compare values.

 document.getElementById('productSelectCreation').onclick = function() {
    var val;
    var checkbox = document.getElementById('productSelectCreation');
    var sel = document.getElementById('productQtyCreation');
if (checkbox.checked)
{
    val = "3";
}
else
    val = "0";
}

      var opts = sel.options;
      for (var opt, j = 0; opt = opts[j]; j++) {
        if (opt.value == val) {
          sel.selectedIndex = j;
          break;
        }
      }
    }

Answer 2

It seems you are looking something like this.

 function setValueToOne(chkbox) { if (chkbox.checked) { alert("checked"); alert(chkbox.value); document.getElementById("productQtyCreation").value = chkbox.value; } else { alert("Unchecked"); document.getElementById("productQtyCreation").value = 0 } } 

 <select name="productSelect" id="productQtyCreation" class="form-control1"> <option value=""/></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> </select> <input type="checkbox" name="productSelect" id="productSelectCreation" onClick="setValueToOne(this)" value="3" />Test 

Answer 3

 function setValueToOne(checkbox) { if(checkbox.checked) { document.getElementById('productQtyCreation').value = 3 }else{ document.getElementById('productQtyCreation').value = 0 } } 

 <select id="productQtyCreation"> <option disabled selected value=""></option> <option value="0">Zero</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <input type="checkbox" name="productSelect" id="productSelectCreation" onClick="setValueToOne(this)" value="3" />