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? — DBS
– DBS, Commented Jun 14, 2021 at 14:16

Amit Gupta · Accepted Answer · 2021-06-14 15:15:04Z

1

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>

answered Jun 14, 2021 at 15:15

Amit Gupta

2523 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BenDyi3 Over a year ago

Thank you so much!, yes this one worked in a simple way

Charlie · Accepted Answer · 2021-06-14 14:21:28Z

0

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>

answered Jun 14, 2021 at 14:21

Charlie

24k12 gold badges65 silver badges96 bronze badges

1 Comment

BenDyi3 Over a year ago

thank you so much! yes, will try to put them in a single function

danh · Accepted Answer · 2021-06-14 14:33:27Z

0

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>

answered Jun 14, 2021 at 14:33

danh

62.7k10 gold badges100 silver badges139 bronze badges

1 Comment

BenDyi3 Over a year ago

got it, Thank you so much!

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related