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.
Related
When I click the first option, it doesn't take the first option. After clicking some other option, then I click first option, it then takes the value
Fruits.map((x, index) => { return <Option selected={myFruit.name === x.name} value={index}>{x.name}</Option>
Use your state value in the select element instead of selected in the option
<select value={myFruit.name}>
// options
</select>
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 trying to make auto-complete multi-select in react . But when a in input it shows me filtered list ,Now I want to get an event when I select any item from list
is there any way to get an event when user selects an item from the list with it's selected value
https://codesandbox.io/s/semantic-ui-react-example-7iy8l
API LINK https://react.semantic-ui.com/modules/dropdown/#types-clearable-multiple
<Dropdown
clearable
fluid
multiple
search
selection
options={countryOptions}
placeholder='Select Country'
/>
You can listen to the onChange event on Dropdown and get the last item of the
value array
<Dropdown
onChange={(e, { value }) => console.log(value[value.length - 1])}
/>
I have some code in which two select boxes are present. One select is dynamically changing its value with respect to the first one. The first select box is this in which some values are coming from backend using PHP.
<select class="form-control" name="tsm_id" id="tsm_id">
<option value=""><b>SELECT TSM</b></option>
<?php echo fill_year($connect); ?>
</select>
A second select box is this which is dependent on the first one. When any value in the first box is selected this select box change its value dynamically.
<select class="form-control" name="sr_id" id="sr_id">
<option value="" selected>SELECT SR</option></select>
But the problem is this that when I select any value in first select box then the selected value SELECT SR disappears and only values from backend comes there. I want that if anyone select value from first select box then SELECT SR remains there as selected value the rest values comes below that. I am using javascript code to append those options.
$(document).ready(function(){
$('#tsm_id').change(function(){
var tsm_id = $(this).val();
$.ajax({
url:"http://localhost/salesforce/fetch_sr.php",
method:"GET",
data:{tsm_id:tsm_id},
dataType:"json",
success:function(data){
// var data=JSON.stringify(data);
$('#sr_id').html('');
for (var i in data)
{
$("#sr_id").append("<option value="+data[i].employee_id+">"+data[i].employee_name+"</option>");
}
}
});
});
});
Can anyone tell me what am I doing wrong in this.
What i want is if someone selects value from the first select box then second select box remains same as in image with selected value set to SELECT SR and the options should be appended below it.
I want something like this:
I don't want like this if I am selecting a value from the first select box then the second select box displaying options, not the default value.
Presently I am getting like this:
$('#sr_id').html('');
This is removing the default option on ajax success.
You might want to use:
$('#sr_id').html('<option value="" selected>SELECT SR</option>');
You're currently removing all options in your ajax callback before you loop out the new ones.
If you change
$('#sr_id').html('');
to
$('#sr_id').html('<option value="" selected>SELECT SR</option>');
that option will always be the first (and selected) value.
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.