We Keep Coding

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

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)

Add selected="selected" to the first option.

<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

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

node js get select variable based on database value

I have a number of dropdowns like this
code:
<label for="schoolType">
Type of School <span style="color: red">*</span>
</label>
<select class="form-control" id="schoolType" name="schoolType" value="{{user.schoolType}}">
<option value="none">None</option>
<option value="public">Public</option>
<option value="private">Private</option>
<option value="homeSchool">Home School</option>
</select>
and the database field is like so
What I'm trying to accomplish
This is a select field that is filled out in registration so I want to grab the value from the database and display it in the edit profile so the users can edit their profiles and change the select if need be.
But as the user refreshes I want the option that they select to be in the select as the selected value.
For reference I am using node.js, express and the handlebars templating engine.

To solve an issue like this, I will advise you to fetch the value selected by the user before, store it in a variable and use a ternary operator to activate it. An actual example is given below.
var selectedValue = user.schoolType;
<select class="form-control" id="schoolType" name="schoolType" value="
{{user.schoolType}}">
<option value="none" selected="{{user.schoolType ===
this.value}}">None</option>
<option value="public" selected="{{user.schoolType ===
this.value}}">Public</option>
<option value="private" selected="{{user.schoolType ===
this.value}}">Private</option>
<option value="homeSchool" selected="{{user.schoolType ===
this.value}}">Home School</option>
</select>

How to pragramatically change a dropdownlist to another field's value

I have a dropdownlist with a list of countries (all countries)
<select id="Country" onchange="country();">
<option id="3">Japan</option>
<option id="4">Canada</option>
<option id="5">France</option>
<option id="6">Peru</option>
</select>
I have the form in a modal that i want get country value from.
<input id="seachcountry" type="text" class="form-control" name="country">
I have written a JQuery line to get the value from the modal form to the page fields, everything works great but the country select fields are not changing the value.
$("#seachcountry").val($("#modalform").val()).trigger("chang‌e");
thank you for your suggestions!

This will work for you:
Just inject the value of the <input> to <select>.
I have created a snippet for you.
var Tval = $('#seachcountry').val();
$('#Country').val(Tval);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Country" onchange="country();">
<option id="3">Japan</option>
<option id="4">Canada</option>
<option id="5">France</option>
<option id="6">Peru</option>
</select>
<input id="seachcountry" type="text" class="form-control" name="country" value="France">

Try this.
function country() {
$("#seachcountry").val($(this).val());
}

For changing value in any select you just need send exist value from this select. In your select options have only ids, but not have value attribute. So if you add value equal to id to change value in the your form to "France" need run following:
$("#selectId").val(5)
Instead of 5 you can obtain value from any other field or else.
If you want set your value to input field when changed in select, you need attach listener that will do all work. It will looks like this:
$("#selectId").on("change", function(){
$("#inputFieldId").val($(this).find(":selected").text());
})
This will set displayed value to select, to set real value just write instead $(this).find(":selected").text() this $(this).val()

How to populate a value in a select ( HTML ) list in AngularJS

I am using a select list in a particular edit form page. Whenever a particular entry has to be edited, a new state with the edit form appears. It has a select list which has to populated with one of its options (ideally the value that is fetched from the server using API has to be populated into the select).
I am using Angular JS on the client side. Could somebody please tell me how to achieve the same thing using Angular JS?
I need that initial value inserted by the user in the select to be shown up as a default when the edit page is opened.
(MOREOVER, MY PLACEHOLDER NOT WORKING:"Choose a country")
Lets say there is something like this:
<div class="col-md-8">
<select data-placeholder="Choose a Country..." class="chosen-select form-control" style="width:350px;" tabindex="2" required="" ng-model="location">
<option value="" disabled selected>Select</option>
<option ng-repeat="location in locations1" value="{{location.id}}">{{location.name}}</option>
</select>
</div>

Use ngOptions.
<select ng-options="location as location.name for location in locations track by location.id" ng-model="selected"></select>

With ng-options you can do it like this:
<div class="col-md-8">
<select ng-model="selectedLocation" ng-options="location.id as location.name for location in locations1" class="chosen-select form-control" style="width:350px;" tabindex="2">
<option value="" disabled selected>Choose a Country</option>
</select>
</div>
The location.id is set to the options value and the location.name is set to the text.
To use a placeholder in a select is kind of what the default options does for you. So I would set the default option text to "Choose a country". Se this SO answer on that topic

JS selection options onchange and post data

Hi I have an selection form which also changes between forms, meaning it's to choose between a product (also is the certain product) and post data after that.
<select class="select" name="product" style="width: 270px" onchange="location = this.options[this.selectedIndex].value;">
<option name="Product 1" selected value="orderform1.html">Product 1</option>
<option name="Product 2" value="orderform2.html">Product 2</option>
</select>
Switch between the product works fine, but post posts the data from the value, so i tried to to switch name and value and
location = this.options[this.selectedIndex].name;
But thats not working, any ideas hints what ever, thx for any help :)