We Keep Coding

Select and update Option in a list with document.getElementsByTagName

I m trying to select an option in a list using document.getElementsByTagName('select')[1].value = 'oop1'
if it works but it didn't update the information related to the selection made
<div class="b">
<label class="page-text" for="symbol">Symbol:</label>
<select class="input-combobox" id="symbol">
<option value="oop1">oop1, Description of it</option>
<option value="oop2”>oop2, Description of it</option>
</select>
I would like that once the selection is made, the form updates the information related to the selection. If I choose manually I see the update, If I use this function, it selects the option but didn't update.

You have to use the [0] for getting the first element as there is only one select element. You code was wrong as many tags were incomplete and you were using wrong quotes
var e=document.getElementsByTagName('select')[0];
e.options[e.selectedIndex].textContent = 'updated value'
e.value='oop1';
<div class="b">
<label class="page-text" for="symbol" >
<select class="input-combobox" id="symbol">
<option value="oop1">oop1, Description of it</option>
<option value="oop2">oop2, Description of it</option>
</select>

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

Angular 2 - how to get value from select / option

The majority of select / option solutions for Angular 2 work in a way that we return the actual content, not the value attribute. However, since I'm still learning Angular 2, I want to get the actual value attribute on clicking a button. I managed to somewhat solve this issue, but I'm not sure if this is the correct approach.
Below is the example of how I'd like it to work:
<select #selectedCategory>
<option *ngFor="#category of categories" [value]="category.id">{{category.name}}</option>
</select>
<button (click)="getValueFromSelect(selectedCategory.value)">
/* This returns the selected category.name, not the value attribute. */
The solution above creates the following HTML (note the lack of value attribute on option):
<select _ngcontent-oom-3="">
<!--template bindings={}-->
<option _ngcontent-oom-3="">stuff 1</option>
<option _ngcontent-oom-3="">stuff 2</option>
<option _ngcontent-oom-3="">stuff 3</option>
</select>
The solution below actually works, however, I need an ngModel in order to make it work.
<select [(ngModel)]="selectedCategory">
<option *ngFor="#category of categories" [value]="category.id">{{category.name}}</option>
</select>
<button (click)="getValueFromSelect(selectedCategory.value)">
/* This returns the value attribute correctly; however, do I really need a ngModel for one value? */
What is the correct way to approach this situation?
Thank you for your suggestions.

As discussed in the comments, the "how I'd like it to work" example does work:
<select #selectedCategory>
<option *ngFor="#category of categories" [value]="category.id">
{{category.name}}
</option>
</select>
<button (click)="getValueFromSelect(selectedCategory.value)">click me</button>
Plunker
However, we must use beta.15 for this to work. See the changelog for beta.15 for more info:
select: set value individually from ngModel (e1e44a9), closes #7975 #7978
I prefer this approach since it does not add a property to the component, nor do we need to use a <form> tag (like in #Thierry's answer).

You could use a control defined inline with the ngControl directive:
<form>
<select #categoriesCtrl="ngForm" ngControl="categoriesCtrl">
<option *ngFor="#category of categories" [value]="category.id">
{{category.name}}
</option>
</select>
<button (click)="getValueFromSelect(categoriesCtrl.value)">
</form>
See this plunkr: https://plnkr.co/edit/uWUS9RaGJ34PiXTJ1kPd?p=preview.

you could do using change event call
<form>
<select #categoriesCtrl (change)='SelectedValue = categoriesCtrl.value'>
<option *ngFor="#category of categories" [value]="category.id">{{category.name}}</option>
</select>
<button (click)="getValueFromSelect()">Get value</button>
</form>
Working Example https://plnkr.co/edit/dQZgSyw6uc67UNhNDlZv?p=preview

AngularJS: ng-model does not update when ng-options refreshes

I'm new to AngularJS, so I apologize if this question is naive.
We have cascading selects that populate as you select values. When the value of Select A changes, the values in Select B also change since they filter based on the value in Select A.
So here is the scenario:
Choose option from Select A
Choose option from Select B
Change selection for Select A
Observe that options in Select B update accordingly.
Observe that bound model for Select B does not update accordingly.
This seems so basic that we are really scratching our heads. What is the point of two-way data binding if this scenario isn't covered?
Here is my view:
<body ng-controller="MainCtrl">
Make:
<select ng-model="makeng" ng-options="option.value as option.display for option in makes">
<option ng-disabled="true" ng-selected="true" value="">Select a make</option>
</select>
<br />
{{makeng}}
<br /> <br />
Model:
<select ng-model="modelng" ng-options="option.display for option in models | filter:{make:makeng}">
<option ng-disabled="true" ng-selected="true" value="">Select a model</option>
</select>
{{modelng}}
</body>
Here's a Plunkr, demonstrating:
http://plnkr.co/edit/9XrKgW?p=preview
P.S. The above example is purely fictional and forked from another plunkr. Just the easiest way to demonstrate what we are seeing.

This is how it is supposed to work. The select control changes the model in response to a user's selection, but if you change the set of allowed values from underneath it (i.e. by filtering out) it keeps the model intact.
The way to make this work is by invalidating the model in response to a change in Select A:
Make:
<select ng-model="makeng"
ng-options="option.value as option.display for option in makes"
ng-change="modelng = undefined">
<option value="">Select a make</option>
</select>
<br />
Model:
<select ng-model="modelng"
ng-options="option.display for option in models | filter:{make:makeng}">
<option value="">Select a model</option>
</select>

Angular ng-select do not start with last selected

Hu,
another question to angular.
I have an array:
items = [
{"id":1,"name":"AAA"},
{"id":2,"name":"BBB"},
{"id":3,"name":"CCC"},
{"id":4,"name":"DDD"}
]
and my ng-select that is combined with a label by
`{{ itemid }}
<select type="text" class="form-control form-control-small"
ng-model="itemId" ng-options="item.id as item.name for item in items">
</select>
Now, when I select by the first time the first option is an "empty space" that I can not choose. But choosing an option makes the drop down closes. And when I click on my select again the last selected option is hightlighted.And I'd like to have the "empty space" as first option again.
Is it possible?

Ye that's possible by resetting your itemId with a combination of ng-click and ng-change e.g.:
<select type="text" class="form-control form-control-small"
ng-model="itemId" ng-options="item.id as item.name for item in items"
ng-click="reset()" ng-change="update()">
</select>
Use one to track when a change is made and only if a change is made and the element is clicked again reset itemId to 0
See this plnkr for an example: http://embed.plnkr.co/i0J0lCZwgnQ9YRoeKoHS/

You can specify a blank option in your HTML as an 'option' element nested within the select (from angular docs):
<select ng-model="myColor" ng-options="color.name for color in colors">
<option value="">-- choose color --</option>
</select>