I have two dropdown in my example with reset state (select bank select state).only first dropdown have data .When I changed first dropdown value then i fetch state data and show in dropdown . if i select YES BANK it show me select state .Now if I select any state example Delhi.then do something.But Now If I change again bank instead of yes bank example Axis bank state dropdown show Delhi why ? it show be reset and show select state ?
how to reset second dropdown (when first dropdown is change).here is my code
https://codesandbox.io/s/7wlwx2volq
Second dropdown always show select state with new data of bank,when user change bank name
onChangeDropdown = e => {
console.log(e.target.value);
this.props.callbackFn(e.target.value);
};
please explain
One possible solution is: Instead of using the selected property on options, use controlled component means use the value property of select field. Whenever any change happen to bank list, reset the value of state select filed value. Also define the value='' with default option.
Like this:
<select value={this.props.value} onChange={this.onChangeDropdown}>
<option value='' disabled>
{this.props.defaultOption}
</option>
{makeDropDown()}
</select>;
Pass value from parent component, like this:
<DropDown
value={this.state.bankName}
data={this.state.bankData}
defaultOption="select Bank"
callbackFn={this.callStateService}
/>
<DropDown
value={this.state.stateName}
data={this.state.stateData}
defaultOption="select State"
callbackFn={this.callDistrictService}
/>
Define onChange function for state select field change:
callDistrictService = value => {
this.setState({ stateName: value });
}
Working Sandbox.
Related
I am implementing a form in which the user can dynamically add or remove dropdowns. Through the dropdown the user may manage the participants/voters.
After selecting a user, the selected user should not re-appear in the dropdown list, in the other available dropdowns.
The part with the dynamic dropdowns is exported to a new function component VotingGroups. In this component I am passing callbacks and two states (groups, unselectedUsers).
VotingGroups({
groups,
addGroup,
deleteGroup,
addVoterDropdown,
removeVoterDropdown,
saveVoter,
saveGroupRate,
unselectedUsers,
})
The users get updated within the groups state (check lower the setGroups line) and this works without any UI problems.
BUG:
After choosing a user/voter from the dropdown, I still see the default value "Choose Voter". Only when I am updating the unselectedUsers state, is when I get the bug (by uncommenting the setUnselectedUsers line everything works). In debug mode, I see that the value gets changed to the one selected and after a few renders it changes back to default.
The unselectedUsers state gets also correctly updated.
This is how I update the both states (using setState hook) within the saveVoter callback:
setGroups(newGroups);
setUnselectedUsers(prevState => prevState.filter(user => user.uid !== newUser.uid))
Here is the select part:
<select className="form-control col-sm-4"
name={"selectVoter"}
value={voter?.user?.uid}
onChange={(e) => saveVoter(
e.target.value, groupIndex, dropdownIndex)}
required>
<option value="">Choose Voter</option>
{
unselectedUsers[0] !== undefined
? unselectedUsers.map((user) => {
return (
<option key={user.uid}
value={user.uid}>{user.username}</option>
)
})
: null
}
</select>
Found the Solution.
The problem lies in the html <select> part.
A dropdown can only show values that exist in the <option><option/> sections.
By only showing the unselectedUsers the dropdown was unable to show the selected user.
I only had to add the following line of code:
{ voter.user?.uid ? <option value={voter.user.uid}>{voter.user.username}</option> : null }
under the
<option value="">Choose Voter</option>
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.
So I have an odd behavior that I want to implement on my dropdown. I have two scenarios and both will have different default selected values.
Scenario 1: If user role is admin, then dropdown will not be disabled and 'Select Location' placeholder will show up as selected default.
Scenario 2: if user role is clerk, then dropdown will be disabled and the selected value will be a specific location from the dropdown selection.
While I got the role permission and disabled/enabled thing setup, I'm not sure how to dynamically change the selected value of the dropdown. This is inside reactive forms form group, so not sure I can use ngModel or can I?
Here's my dropdown:
<select [ngModel]="null" formControlName="location" required >
<option value="null" disabled>{{'SelectLocation' | translate}}</option>
<option selected *ngFor="let store of location" [ngValue]="store._storeKey">{{ store._storeName }}</option>
</select>
Here's the check I have that disables/enables the dropdown:
checkUserPermissions() {
if (this.userPermissions._userPrivilegeKey === 100) {
//TODO: Default to store2 of list for example
this.transactionForm.controls['location'].value = stores._store; // This is right?
this.transactionForm.controls['location'].disable();
} else if (this.userPermissions._userPrivilegeKey === 200) {
//TODO: Default to select location placeholder (currently working)
this.transactionForm.controls['location'].enable();
}
}
You should use the patchValue function instead of directly assigning the value when dealing with forms
this.transactionForm.controls['location'].patchValue(stores._store)
I want to have the opportunity to select from a dropdown list a value and to click on a link to get the next Value of the dropdown list. How could I update the selected Value from the dropdown list if I click on the link?
<select class="dropdown-select" name="mySelect" id="chapter" ng-options="option.Icnumber for option in selected"
ng-model="selected.Icnumber" ng-change="updateChapter(selected.Icnumber.Icnumber)">
</select>
<a ng-show="nextChapter" class="ng-hide" ng-click="updateChapterNext(selected.Icnumber.Icnumber)">Next Chapter</a>
Thanks!
Angular has a feature called two ways binding, what ever you have in $scope and use it in the template, when you update the value in the controller, it will automatically update the value in the template.
for your problem you use selected as the dropdown value.
so in your updateChapterNext function modify the value for selected
so
$scope.updateChapterNext = function(param){
// do your thing to call next chapter
// and assign the response or new value to selected
$scope.selected = newValueForSelected;
}
this will update the selected value on the dropdown
I have a form for my user to search for something based on the category and location, and the location is based on state and city options. So for each state option, there is a city select element consisting of list of cities in the state. (i.e There are 10 states option in the states select, each state option will show a different list of cities select element. so if state1 option is selected, list of cities in state1 will be shown and others will be hidden, if state2 is selected, list of cities in state2 will be shown and others will be hidden and so on). I am using two jquery scripts for these select elements.
The first script is to manipulate the value of state and city element after a user search, so that if they are going to change category, they would not need to re-select the state and city select elements as they are already set to the value that the user searched.
The second script is to show/hide the cities select element based on the states option selected.
The problem is, after a user search for a example, category1 option, state2 option, and city1 option of state2, then if the user want to change to state3 option, the state3 cities list select will be blank, because the value is set to the state2 city value, how do I remove this value, so that when a user change to another state, the city select element will have default value(no value set) ?
I am sorry if my explanation a bit unclear. Anyway here is the code for clearer picture. Thx.
html :
<select name='category'>
<option value='category1'>Category1</option>
<option value='category2'>Category2</option>
..
</select>
<select name='state' class='state'>
<option value='state1' class='cities_state1'>State1</option>
<option value='state2' class='cities_state2>State2</option>
...
</select>
<select name='city' class='cities' id='cities_state1' disabled>
<option value='city_1_in_state1'>City 1 in state1</option>
<option value='city_2_in_state1'>City 2 in state1</option>
...
</select>
<select name='city' class='cities' id='cities_state2' disabled>
<option value='city_1_in_state2'>City 1 in state2</option>
<option value='city_2_in_state2'>City 2 in state2</option>
...
</select>
css :
.cities {
display: none;
}
jquery script 1 (set value of city so that user does not need to re-select) :
$(document).ready(function() {
$('.state').val('<?php echo $_GET['state'];?>');
//get the class attribute of option selected in state select element
var city = $('.state option:selected').attr('class');
//Show cities list of selected state
$('#' + city).show();
$('#' + city).prop('disabled', false);
//Hide other cities list not of selected state
$(.cities).not('#' + city).hide();
$(.cities).not('#' + city).prop('disabled', true);
//manipulate value of city select
$(.cities).val('<?php echo $_GET['city'];?>');
});
Jquery script 2 (hide/show everytime state option changed) :
$(document).ready(function() {
$('.state').change(function() {
//get the class attribute of option selected in state select element
var city = $('.state option:selected').attr('class');
//Show cities list of selected state
$('#' + city).show();
$('#' + city).prop('disabled', false);
//Hide other cities list not of selected state
$(.cities).not('#' + city).hide();
$(.cities).not('#' + city).prop('disabled', true);
});
This is how the process that I want :
User select a category, state and a city and search
Page return with result, and state and city select has the value of the search (incase user want to select another category, user does not need to re-select state and city).
But if user want to choose another city of another state, when user change another state, the city select should show the value of the first option in that select element, because now if a user change a state, it will show the city list select of that element but with blank, instead of the first option of the select.
I have tried using removeattr('selected'), prop('selected', false), but still unable to make the city select to show the first option when state is changed. Sorry for the quite messy explanation and code. All suggestion to achieve what I need is very welcomed. Thx in advance
Use ajax for this problem
Three interlinked dropdown
PHP Ajax Country State City Drop Down
Demo of linked drop down list by using Ajax & PHP
Try below code -
NOTE - you need not to use document.ready multiple times. Use it once and put all your script code inside it.
$(document).ready(function() {
//set initial code when page loads
//set state1 selected
$('.state').val('state1');
//get class value for selected state and use it to select city
var city = $('.state option:selected').attr('class');
//Hide other cities list not of selected state
$('.cities').hide();
//Show cities list of selected state
$('#' + city).show();
//manipulate value of city select
$('.cities').val('city_1_in_state1');
//Add state select box listener
$('.state').change(function() {
//get the class attribute of option selected in state select element
var city = $(this).find('option:selected').attr('class');
//Hide other cities list not of selected state
$('.cities').hide();
//Show cities list of selected state
$('#' + city).show();
//set non blank option to select
$('#' +city).find('option:not(:empty):first').prop('selected',true);
});
});
JSFiddle Demo