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

creating simple drop down menu for a form

I am trying to create a simple HTML question form with drop down menu options. After the user selects the answer choices I want them to hit submit and the form just updates the page with the answers selected. I don't want the answers to be uploaded to a database, just simply want the answers to be displayed/page updated (eg the drop down menus are no longer active).
This is what I have:
<label for="InputOne">Input One</label>
<select id="InputOne">
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
<option val="4">4</option>
</select>
<label for="InputTwo">Input Two</label>
<select id="InputTwo">
<option val="1">a</option>
<option val="2">b</option>
<option val="3">c</option>
<option val="4">d</option>
</select>
<input type="submit" value="Submit">
</form>
so for instance if a person selects "2" and "c" from the drop down menu and hits submit, how do i get the page just to update so now the text displayed "Input One 2 Input Two C" without the drop down menu and submit buttons active/displayed. thank you.

HTML: Is there a way to allow the user to type in their input but also have a drop down select menu?

For example, I have
<label class="form">Menu</label>
<select id="selection" name="select" required>
<option value="" selected>--Select an Option--</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
...
</select>
This would only give a a drop down menu when the user clicks on the input box with their mouse. But I want to give them the option to be able to type in the input box such as:
If the user types in option1 it would direct them to the "Option 1" drop-down menu, etc. And if the user types in any other words that are not included in the drop-down list it would show "Invalid Input".

Yes there is! A text input with a list attribute:
<input type="text" name="city" list="cityname">
<datalist id="cityname">
<option value="Boston">
<option value="Cambridge">
</datalist>
EDIT: for the autocomplete, try Bootstrap Typeahead

How to show datalist suggestions using javascript?

I find the new <datalist> generally very useful, but I think that the suggestions are not visible enough. Is there a way to trigger the display of datalist suggestions using javascript?
As an example, I have a datalist on an <input type="number"> (jsFiddle).
<label>
Enter a Fibonacci number:
<input type="number" list="fibonacci" min="0" id="myinput">
</label>
<datalist id="fibonacci">
<option value="0">
<option value="1">
<option value="2">
<option value="3">
<option value="5">
<option value="8">
<option value="13">
<option value="21">
</datalist>
<button type="button" id="show-suggestions">Show suggestions</button>
<script>
$('#show-suggestions').click(function() {
// .showSuggestions() does not exist.
// I'd like it to display the suggested values for the input field.
$('#myinput').showSuggestions();
});
</script>
In Chrome, the full list of suggestions is shown only when the input is empty, already has focus, and the user then clicks on the input. The down arrow does not show the suggestions - it simply decrements the value.
I'd like to make the suggestions more visible. As an example I've added a button that's supposed to open the list of suggestions. What do I put in the onClick-handler?
I've used Chrome, jQuery and a number-input in this example, but I'd prefer a generic solution independent of all of those.

If you remove the type="number" your users can get the dropdownlist using the basic alt+downarrow keyboard shortcut.
If that doesn't work for you. I suggest using a hybrid approach such as https://github.com/mmurph211/Autocomplete

Picking your country from a list containing more than 200 options is an ideal candidate for an autocomplete control. Define a with child elements for every country directly in an HTML page:
<datalist id="countrydata">
<option>Afghanistan</option>
<option>Åland Islands</option>
<option>Albania</option>
<option>Algeria</option>
<option>American Samoa</option>
<option>Andorra</option>
<option>Angola</option>
<option>Anguilla</option>
<option>Antarctica</option>
...etc...
</datalist>

Using JavaScript, how can I reset all the select's in my form so that the first option for each is selected?

I have a form containing only select fields, a submit button and a reset button.
<form id="search_form">
<select id="country">
<option value="-1">Select Country</option>
<option value="22">USA</option>
<option value="23">Germany</option>
...
</select>
<select id="regions">
<option value="-1">Select Region</option>
...
</select>
<input type="reset" value="Reset />
</form>
Each of the select fields has a default option with a value of "-1".
When a user clicks on the reset button, I want all the selects to show the option with this "-1" value as being selected.
What is the best way to do this using JQuery?

You can just make a single .val() call, like this:
$("#search_form select").val("-1");
Or the entire handler:
$("#search_form input:reset").click(function(e) {
$(this).closest("form").find("select").val("-1");
e.preventDefault();
});​
You can give it a try here, though if you're just using this to default the values instead of resetting them, I'd use a button instead of a type="reset".