how to select automatically first value of dropdown in select input?

Question

I am working with laravel and in my form I am grab data to select input using some variable,

<label for="exampleFormControlSelect1">Vehicle Category</label>
  <select name="c_id" id="c_id" class="form-control input dynamic" data-dependent="b_id" >
    @foreach($model_list as $model) 
      <option value="{{$categories->id}}">{{$categories->id}}</option>
    @endforeach
  </select>

Now I am going to hide this select input and this select input is depend to other select inputs values. So, I need select automatically drop down values to above select input using some technology. How can I do this? (currently it should select manually using drop down list)

No any idea about this matter?

banda
– banda

2018-08-06 14:40:01 +00:00
Commented Aug 6, 2018 at 14:40 — banda
– banda, Commented Aug 6, 2018 at 14:40
May be answer to this question could help you.

Nik
– Nik

2018-08-06 15:25:07 +00:00
Commented Aug 6, 2018 at 15:25 — Nik
– Nik, Commented Aug 6, 2018 at 15:25

memo · Accepted Answer · 2018-08-06 15:15:44Z

1

Add selected="selected" to the first option.

answered Aug 6, 2018 at 15:15

memo

1,93813 silver badges19 bronze badges

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

1 Comment

memo Over a year ago

@banda Unfortunatelly I am not familiar with Laravel. Probably you will need a variable that keeps track of the iteration, and an @if to insert the select attribute conditionally.

Marcelo Pereira · Accepted Answer · 2018-08-06 18:58:44Z

0

<select name="c_id" id="c_id" class="form-control input dynamic" data-dependent="b_id" >
{{$i = 1;}}
@foreach($model_list as $model) 

  <option value="{{$categories->id}}" {{($i == 1) ? "selected='selected' : ''"}}>{{$categories->id}}</option>
  $i++;
@endforeach

edited Aug 6, 2018 at 18:58

answered Aug 6, 2018 at 18:40

Marcelo Pereira

614 bronze badges

Comments

Mario · Accepted Answer · 2018-08-06 19:48:18Z

If you need to select the first option of a select, you can do it in three ways

select.options select.values select.selectedIndex

For example having this form that contains the select that probably rendered blade

<form name="formName">
    <label>Categories</label>
    <select name="c_id">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
</form>

You could try

const category = document.forms.formName.c_id;

console.log(category.value)
console.log(category.options[0].value)
console.log(category.options[category.options.selectedIndex].value)

This will show on the console:

'1' '1' '1'

Visit this link to try the example

To read more about select and some useful options visit this article in select and option section

Now, probably I misinterpret your question, in your comment you mention that this select is dependent on another, this is not clear to me, does it have any relation to the data attribute? If this is the case, please develop your question

Collectives™ on Stack Overflow

how to select automatically first value of dropdown in select input?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related