CODEWITHSUNDEEP
javascripthtmlcss
Brindha Baskaran
Brindha Baskaran

Reputation: 195

How to set focus for bootstrap drop down box

I have a drop down box taken from "silviomoreto.github.io/bootstrap-select.," Here I need to focus to that drop down on page load because i don't want to click to that drop down to set the focus., once the page loaded then directly the focus should move to the drop down

I have tried the below code

<select class="form-control show-tick" data-live-search="true" name="lstClass" id="lstClass" >
    <option>Class1</option>
    <option>Class2</option>
    <option>Class1</option>
</select>

<script>
    document.form1.lstClass.focus();    
</script>

Upvotes: 0

Views: 2101

Answers (3)

Paresh Barad
Paresh Barad

Reputation: 1609

You can do it by 2 ways using autofocus and jquery

$('select[name="lstClass"]').focus();
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control show-tick" data-live-search="true" name="lstClass" id="lstClass" >
    <option>Class1</option>
    <option>Class2</option>
    <option>Class1</option>
</select>

Upvotes: 0

S.Orioli
S.Orioli

Reputation: 441

Just add autofocus to the select tag

<select autofocus class="form-control show-tick" data-live-search="true" name="lstClass" id="lstClass" >
    <option>Class1</option>
    <option>Class2</option>
    <option>Class1</option>
</select>

Upvotes: 1

cloned
cloned

Reputation: 6742

You can use autofocus for this. This attribute sets the focus to the first element that has this attribute on page load: 

    <select autofocus> 
      <option> TEST</option>
    </select>

Upvotes: 2

Related Questions