We Keep Coding

Clear content in select box when first select option changed - reactJS

I am new to ReactJS. I have used AntJS select in my ReactJS project. I have two select in HTML. When the first select is selected, its relative dropdown will be loaded in the second select.
UI View:
When the user chooses the option in the first select, the second select will load its contents.
It was working great. Now my issue was " When I choose an option in second select, it is there in the second select box. But When I changed the option in the first select, the already chosen option in the second select is still there, but the drop-down content in the second select has changed.
My Issue in UI View:
How to clear the selected content in the second select box when the first select option has changed". I have tried so far. I don't how to make it possible. Help me with some solutions.
Code:
WAAccountNameChange(value){
this.setState({selectedValue:"", waWebsiteList: this.state.waAccountWebsiteList[value] })
}
First Select:
<Select " onChange= {(value) => { this.WAAccountNameChange(value)}} >
{this.state.waAccountList.map((item, index) => <Select.Option value={item} key={index}>{item}</Select.Option>)}
</Select>
Second Select:
<Select defaultValue={this.state.selectedValue} onChange= {(value) => { this.setState({ selectedValue: value })} } >
{this.state.waWebsiteList.map((item, index) => <Select.Option value={item} key={index}>{item}</Select.Option>)}
</Select>

On the change of first select menu clear the value of second select box. If you retrieve data from API than clear state on API success.

Angular 4 Select don't update on ngModel change

I am trying to make that after new value is selected, I call eventChange() function and restore selected value to default. But what happens: ngModel value updates, but selected value stays the same. How should I do that selected value and ngModel value would be the same?
HTML file
<select [(ngModel)]="selectedValue"
(change)="eventChange()"
>
<option [disabled]="true"
[ngValue]="-1">
Choose an option
</option>
<option *ngFor="let item of myList index as i"
[ngValue]="i"
>
{{item.name}}
</option>
</select>
Function from Component file
selectedValue = -1; //works //Option in select is changed
eventChange(){
this.selectedValue= -1; //don't work
//Function is called,
//Value changes
//But selected Option in Select doesn't change
}
Comment:
On running web page(refresh) first value of select is set properly, if in component file I set variable selectedValue to other index the other value is selected, but it works only on run, but not in function)
Also I found this question Angularjs: select not updating when ng-model is updated
But here is an answer to AngularJS for using ng-options, instead of ng-repeat, in angular 4 I found only *ngFor...
Update:
Clarification just in case: function is being called, but I want change selected option through javascript. I try this by changing ngModel value, but even when ngModel value is cahnged, selected option doesn't change.

Use ngModelChange and you don't need [ngValue]
<select [(ngModel)]="selectedValue"
(ngModelChange)="eventChange()"

why it displays the first option by default when adding a new option into select

Fisrt of all, the value of select is null(no option is selected) and there already exist some options. However, it changes to the value of first option after adding a new option into select through jquery and vue respectively, why? (we tested this case on chrome)
1.
<select>
<option val="a">a</option>
<option val="b">b</option>
<select>
at this time:
$("select").val() == null
add an option into select with jquery$("select").append("<option value='hi'>hi</option>")
at this time:
$("select").val() == "a"

By default, HTML prefers to have an option selected. It is likely that you manually set the selectedIndex to -1 for your select which is overridden after appending an element to the select. You have one of two options:
Detect your current selectedIndex and restore it after appending. Something along to lines of var originalSelectedIndex = $("select").prop("selectedIndex"); $("select").append("<option value='...'>...</option>"); $("select").prop("selectedIndex", originalSelectedIndex);.
Create an initial element with an empty label such as <option label=" "></option> which would in essence submit an empty value to your server upon submit.

JQuery to change value based on selection

i have 2 dropdownlist, i want if i select Alabama in dropdwon1 the selected value in dropdwon2 should change in to Other.., how to do this using JQuery
<select id="dropdwon1">
<option value="1">Alabama</option>
<option value="2">Alaska</option>
<option value="3">Arizona</option>
</select>
<select id="dropdwon2">
<option value="3">Item1</option>
<option value="4">Item2</option>
<option value="5">Other..</option>
</select>

You must bind event to first select change event and check it's selected value and set value for second select like this:
//Bind change event to first select
$('#dropdwon1').on('change', function(){
//check selected value
var value = $(this).val();
if(value == 1){
//Set selected value for second select
$('#dropdwon2').val(5);
}
})

You have to initialize your value for the second select for the first value of your state select, like so :
if($("#dropdown1").val()=="1"){
$("#dropdown2").val("5"); // Set the value (your answer)
}
then use the change event and give the different values of the second select for the states values.
As the user can select Alabama again after having chosen another value, you have to put the code for the first value in the change event function.
Here is a jsfiddle :
https://jsfiddle.net/mantisse_fr/ak81o26s/4/

set/change value to drop down using jquery

how to set or change value to drop down.
I'm having a drop down list which is initially not selected a value.
How can i select a value using jquery

The val() function is used to get and set the value of input controls (including <select>). Grab a jQuery reference to your <select>, and pass its val() function a string matching the value attribute of the <option> that you wish to select:
$("#mySelect").val("15");
This would select the second option in this list:
<select id="mySelect">
<option value="5">Few</option>
<option value="15">More</option>
<option value="100">Many</option>
</select>

$("#id_select").val("value_1");
id_select -> is the id of your select
value_1 -> is one of the values presents in the option of select