How to select a value in a selectbox with jQuery?

Question

I have a multiselect dropdown box and a input as below:

<select name="offer_type"  multiple="multiple">
    <option value="1">Hot Offer</option>
    <option value="2">Best Offer</option>
    <option value="3">Special / Festival Offer</option>
    <option value="4">Side Offer</option>
    <option value="5">Top Offer</option>
    <option value="6">Megha classified Offers</option>
    <option value="7">Buy One / Get One Offer</option>
    <option value="8">Inagural Offer</option> 
</select>

<input type="text" name="offer" value="" />

Now I want the selected value of offer_type in offer without page refresh. with Jquery.

Ian Jamieson · Accepted Answer · 2011-12-02 09:02:51Z

5

This should do it for you, you don't need any PHP, just jQuery:

$(document).ready(function() {
  $('select[name="offer_type"]').change(function() {
    var selectedValue = $(this).find('option:selected').val();
    $('input[name="offer"]').val(selectedValue);
  });

});

For the multiple select, try something like this:

$(document).ready(function() {
  $('select[name="offer_type"]').click(function() {
    var selectedValsAsString = '';
    $(this).find('option:selected').each(function() {
        selectedValsAsString += $(this).val()+' ';
    });
    $('input[name="offer"]').val(selectedValsAsString);
  });

});

This will display your answers in the text field separated by a space.

edited Dec 2, 2011 at 9:02

answered Dec 2, 2011 at 8:48

Ian Jamieson

4,8863 gold badges40 silver badges61 bronze badges

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

2 Comments

bid Over a year ago

Hi, Thanx for ur reply.I guess the above jquery is for single select option. If i have to choose multiple select option, Then how it will be?

bid Over a year ago

Thanks a lot, both single and multiple select option are working.

Shae Petersen · Accepted Answer · 2011-12-02 09:12:18Z

0

to get the value of the form fields:

$(function() {

      $('select[name="offer_type"]').change(function() {

      document.write(
      'offer type: ' + $('select[name="offer_type"]').serialize() + '<br />' +     
      'offer name: ' + $('input[name="offer"]').val()
      );

    });
  });

edited Dec 2, 2011 at 9:12

answered Dec 2, 2011 at 8:54

Shae Petersen

586 bronze badges

1 Comment

bid Over a year ago

Thanks for the rply. Can you do it without click function with multiple select option.

Collectives™ on Stack Overflow

How to select a value in a selectbox with jQuery?

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related