How to add a selected attribute in option using button using javascript

Question

I was trying to look for this in the page but can't find.

I was trying to code a 3 buttons where each of this buttons will add a "selected" attribute based on the value or by "value within the id" but my brain cant work it out.

here is my code so far

<button> 1 Bottle</button>
<button> 3 Bottle Super Saver Bundle</button>
<button> 6 Bottle Super Saver Bundle</button>

<form>
  <select class="elOrderProductVariationSelectValue" data-type-id="22439" id="variant-type-value-22439">
    <option value="69663">Single Bottle</option>
    <option value="69664">3 Bottles</option>
    <option value="69665" selected="">6 Bottles</option>
  </select>
</form>

<script>
var select = document.getElementById('variant-type-value-22439');

function select1bottle(){
    //
}

function select3bottle(){
    //
}

function select6bottle(){
    //
}
</script>

Does this answer your question? [How do I programmatically set the value of a select box element using JavaScript?](https://stackoverflow.com/questions/78932/how-do-i-programmatically-set-the-value-of-a-select-box-element-using-javascript) — DBS, Jun 14 '21 at 14:16

score 1 · Accepted Answer · answered Jun 14 '21 at 15:15

Try this -

<button onclick="selectbottle(69663)"> 1 Bottle</button>
<button onclick="selectbottle(69664)"> 3 Bottle Super Saver Bundle</button>
<button onclick="selectbottle(69665)"> 6 Bottle Super Saver Bundle</button>

<form>
    <select class="elOrderProductVariationSelectValue" data-type-id="22439" id="variant-type-value-22439">
        <option value="69663">Single Bottle</option>
        <option value="69664">3 Bottles</option>
        <option value="69665" selected="">6 Bottles</option>
    </select>
</form>

<script>
var select = document.getElementById('variant-type-value-22439');

function selectbottle(selVal){
    select.value = selVal;
}
</script>

Thank you so much!, yes this one worked in a simple way – BenDyi3 Jun 14 '21 at 21:46 — BenDyi3, Jun 14 '21 at 21:46

score 0 · Answer 2 · answered Jun 14 '21 at 14:21

You can set the value of the select element directly. to be more efficient, you should run a single function when any of the buttons clicked and make it select either item via an argument.

var select = document.getElementById('variant-type-value-22439');
    
    function select1bottle(){
        select.value = '69663';
    }
    
    function select3bottle(){
        select.value = '69664';
    }
    
    function select6bottle(){
        select.value = '69665';
    }

<button onClick="select1bottle()"> 1 Bottle</button>
<button onClick="select3bottle()"> 3 Bottle Super Saver Bundle</button>
<button onClick="select6bottle()"> 6 Bottle Super Saver Bundle</button>

<form>
    <select class="elOrderProductVariationSelectValue" data-type-id="22439" id="variant-type-value-22439">
        <option value="69663">Single Bottle</option>
        <option value="69664">3 Bottles</option>
        <option value="69665" selected="">6 Bottles</option></select>
    </form>

thank you so much! yes, will try to put them in a single function — BenDyi3, Jun 14 '21 at 21:43

score 0 · Answer 3 · answered Jun 14 '21 at 14:33

Make the button ids the same as the select option values. On click, set the select value to the id of the button.

var select = document.getElementById('variant-type-value-22439');

document.getElementById("buttons").addEventListener("click",
  event => {
    if (event.target.nodeName === 'BUTTON') {
      const select = document.getElementById('variant-type-value-22439');
      select.value = event.target.id
    }
  });

<div id="buttons">
  <button id="69663"> 1 Bottle</button>
  <button id="69664"> 3 Bottle Super Saver Bundle</button>
  <button id="69665"> 6 Bottle Super Saver Bundle</button>
</div>

<form>
  <select class="elOrderProductVariationSelectValue" data-type-id="22439" id="variant-type-value-22439">
    <option value="69663">Single Bottle</option>
    <option value="69664">3 Bottles</option>
    <option value="69665">6 Bottles</option>
  </select>
</form>

How to add a selected attribute in option using button using javascript

3 Answers3