How to preselect a <select> list item in Bootstrap using jQuery

Question

I have the following bootstrap markup and jQuery script and my select list item is not being pre-selected:

    <!-- Text input-->
    <div class="form-group">
      <label class="col-md-4 control-label" for="serviceType">Service Type</label>
      <div class="col-md-1">
        <select id="serviceType" name="serviceType" class="form-control">
          <option value="S">S</option>
          <option value="T">T</option>
          <option value="X">X</option>
        </select>
        <script>
          //$('[name=serviceType]').val( T ); // not working
          //$('#serviceType').val( T ); // not working
          //$('[name=serviceType]').val( "T" ); // not working
          $('#serviceType').val( "T" ); // not working
        </script>
      </div>
    </div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Can anyone see what is wrong with the jQuery? Thanks.

Appended Note #1: My jQuery CDN lib link is right before the closing tag whereas this container and javascript is up higher in the web doc. Does that matter?

Appended Note #2: Added the jQuery CDN lib for complete view.

I have created a demo for you jsfiddle.net/9gjjj1tm. Please check. — prashant
– prashant, Commented Nov 6, 2015 at 0:50

Francis Saul · Accepted Answer · 2015-11-06 00:56:07Z

2

can you try this

$(document).ready(function () {

$('select option[value="T"]').attr("selected",true); });

answered Nov 6, 2015 at 0:56

Francis Saul

7502 gold badges18 silver badges38 bronze badges

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

5 Comments

H. Ferrence Over a year ago

does not work in my web doc @Francis. does this <script> container need to come after the jQuery lib in the document flow?

Francis Saul Over a year ago

Hi H.Ferrence, your code is working properly I've tested it. import first the jquery lib before anything else.

H. Ferrence Over a year ago

"import first the jquery lib before anything else" -- meaning the jQuery CDN lib must be placed above my script in order for it to work? Placement and order of the lib and my script matter?

H. Ferrence Over a year ago

Yep, once I move my script after the jquery lib it works. so placement and order matter.

H. Ferrence Over a year ago

Ok, learning something because I always thought $(document).ready(function () {...}); meant I could position the the CDN lib at the bottom of the doc.

prashant · Accepted Answer · 2015-11-06 00:53:15Z

1

You need to call this code on page load. You should be using $( '#serviceType' ).val('T')

Please check the code below

  <!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="serviceType">Service Type</label>
  <div class="col-md-1">
    <select id="serviceType" name="serviceType" class="form-control">
      <option value="S">S</option>
      <option value="T">T</option>
      <option value="X">X</option>
    </select>
    <script>
     $(function() {
      $( '#serviceType' ).val('T'); 
        });
    </script>
  </div>
</div>

Dont forget to include jQuery file.

answered Nov 6, 2015 at 0:53

prashant

2,2192 gold badges24 silver badges39 bronze badges

2 Comments

H. Ferrence Over a year ago

thanks @prashanth. I'll test it out. My jQuery is present but at the bottom of the document - after this section. Is that the reason?

H. Ferrence Over a year ago

does not work in my web doc @prashanth. does this <script> container need to come after the jQuery lib in the document flow?

Sourabh Kumar Sharma · Accepted Answer · 2015-11-06 07:15:37Z

0

$('#serviceType').val('T');

works

edited Nov 6, 2015 at 7:15

Sourabh Kumar Sharma

2,8273 gold badges27 silver badges33 bronze badges

answered Nov 6, 2015 at 1:08

YongZPub

1072 bronze badges

Collectives™ on Stack Overflow

How to preselect a <select> list item in Bootstrap using jQuery

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related