Question 276050 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Why the selected value does not shown in drop down box?

Here is my code.

This is a form for filling in the request object attributes.

Expected Result

Users can select a technician from the drop-down box, and then the selected technician information will be stored in the request object.

The problem

My problem is the selected value does not show in the drop-down box.

What I want

I want the drop-down box component to be self-contained.
So, should I store the selected technician object in the reducer object in Technician.js? However, I just want to store the selected technician object in the HelpDesk.js only.

I don’t know why the selected technician object is not updated to the Technician.js.

Would you give me some advice on this issue?

Tags:

2

Answers


  1. 0 
       <Select
    isClearable
    onChange={doChange}
    options={itemList.technicianList}
    placeholder="Please select a technician"
  />

    It didn’t change because you were providing the select component with prop value. Just simply remove value and it will work fine or if you wanna give it a default value use defaultValue.

    Login or Signup to reply.
  2. 0

    I’ve checked your code and I found the issue.

    <Select
        isClearable
        onChange={doChange}
        options={itemList.technicianList}
        placeholder="Please select a technician"
        value={technician}
      />

    As you can see here, If the select is changed, the doChange() function will be called.

    This is the doChange() function.

    let doChange = (e) => {
    let technician = {};
    if (e) {
        technician.value = e.value;
        technician.isValid = true;
    } else {
        technician.value = undefined;
        technician.isValid = false;
    }
    onChange(technician);
  }

    As you can see, you got the value of the select option like "e.value".
    This is the issue. Because the data structure of "e.value" is an object.
    Like this:

    let list=[
      {id:1,name:"Peter",jobtitle:"IT Support"},
      {id:2,name:"Paul",jobtitle:"IT Support"},
      {id:1,name:"Tom",jobtitle:"IT Support"},
      {id:1,name:"John",jobtitle:"IT Support"},      
    ];

    If you use "e.value.name" or "e.value.jobtitle", then it will work.

    I wish this will help you. Good luck to you!!!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search