Setting the value of a dropdown box using JQuery

Question

I am trying to set the value of a dropdown box using JQuery. This is my code but it is not working:

//Check if a box is ticked, if it is set the quantity:
$('.normalbulk').change(function(){
    if(this.checked){
    $('.order_amount').val('26');
    }
});

This is the HTML

<!-- If stock code contains "BULK" Display check box -->
                       <? $bulk = get_field('description', $product->ID);
                        if(strpos($bulk, 'Bulk') !== false): ?>
                         Normal Bulk:<input type="checkbox" name="normalbulk" value="bulk" class="normalbulk"> (26 Pallets)
                         Split Bulk: <input type="checkbox" name="splitbulk" value="bulk" class="splitbulk">  (16 Pallets)
                        <? endif; ?>

The idea is that when it is checked set the value of order_amount to 26 and when it is unchecked set the value to 0. The code I have at the moment does nothing.#

order_amount code

 Amount <select id="order_amount<?= $product->ID; ?>" name="amt" class="order_amount">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        </select>

I appreciate all your answers guys, but it is still not working for me and I Can't understand why. This is my code now:

$(".normalbulk").change(function(){
   if(this.checked){
       console.log("checked");
       console.log($(this).closest('li').find('.order_amount').val());

   }else{
       console.log("unchecked");
       console.log($(this).closest('li').find('.order_amount').val());
   }
});

When the box is checked it outputs "checked" as expected, also prints the value of the closes dropdown but for some reason I just can't set the value which I do by changing the code to this:

       $(this).closest('li').find('.order_amount').val('26');

Found out why it wasn't working. I did not have a select option with a value of 26. Therefor it did not set the box to display anything. When I adjusted the code to display a value that did exist it worked perfectly using the solutions provided below.

Thank you for the help everyone

Is your JavaScript code in a document.ready function? What does the HTML for class="order_amount" look like? — Krisztián Balla
– Krisztián Balla, Commented Jun 13, 2014 at 8:46

Dhaval Marthak · Accepted Answer · 2014-06-13 08:53:34Z

4

Your code is right you just have to write else portion here, like this:

$('.normalbulk').change(function(){
    if(this.checked){
      $('.order_amount').val(26);
    }
    else{
      $('.order_amount').val(0);
    }
});

Edit

Your dropdown must have value attribute with 26 vaule in it. So that you can select it with .val()

Demo with select

Demo

edited Jun 13, 2014 at 8:53

answered Jun 13, 2014 at 8:46

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

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

3 Comments

Javacadabra Over a year ago

I realise I left the else portion out, but I had tried it like that and it still wasn't working, also your example is using a textbox I know it probably isn't a huge difference but I've literally got the exact same code as you except with a dropdown.

Dhaval Marthak Over a year ago

@Javacadabra hold on i'm working with dropdown and will return with the exact you want!

Javacadabra Over a year ago

Thank you for your help @Dhaval, I got the code working with your answer and a little bit of tweaking on my end. I had a silly error in my code!!

Shaunak D · Accepted Answer · 2014-06-13 08:49:37Z

1

Working Demo

Use event delegation- jQuery .on() if your checkboxes are added dynamically.

$(document).on('change','.normalbulk',function(){
    if(this.checked){
        $('.order_amount').val('26');
    }
    else{
        $('.order_amount').val(0);
    }
});

edited Jun 13, 2014 at 8:49

answered Jun 13, 2014 at 8:44

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

Comments

ndcweb · Accepted Answer · 2014-06-13 08:46:04Z

0

The value of input type checkbox can only be true or false. You can change .splitbulk to input type hidden for example.

answered Jun 13, 2014 at 8:46

ndcweb

7254 silver badges10 bronze badges

2 Comments

t.niese Over a year ago

The value of an input element and the state are two different things. A checkbox can be checked or not, but the value on the other hand can be anything.

ndcweb Over a year ago

@t.niese you are right, I'm sorry for the confusion.

Amit Kumar · Accepted Answer · 2014-06-13 08:46:48Z

0

to assign value use this query .

$(".order_amountoption").filter(function () {
                                      return $(this).attr('value') == '26';
                                  }).attr('selected', true);

answered Jun 13, 2014 at 8:46

Amit Kumar

5,96212 gold badges49 silver badges88 bronze badges

Comments

Ravi MCA · Accepted Answer · 2014-06-13 08:56:34Z

0

$('.normalbulk').click(function(){
    if(this.checked){
         $(".order_amount").val('26');
    }else {
         $(".order_amount").val('0');
    }
});

answered Jun 13, 2014 at 8:56

Ravi MCA

2,6314 gold badges23 silver badges35 bronze badges

Collectives™ on Stack Overflow

Setting the value of a dropdown box using JQuery

5 Answers 5

Demo with select

Demo

3 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related