DEV Community

Question :--

ivadam00 on September 27, 2022

How to take dependent select box option value using javaScript and and do something with it and show it in html document.

im beginner in web development :(

Collapse
 
mellen profile image
Matt Ellen-Tsivintzeli •

What do you mean by "dependent select box option value"? What is it dependent on?

Collapse
 
ivadam00 profile image
ivadam00 • • Edited

Hello Senpai :)

here i have this container inside this i created two "Divs" with classname "content1" and "content2" , both divs have select box , html code is below...

<div class="container">
            <div class="content1">
                <label for="">Country : </label>
                <select name="" id="select1" onchange="populate(this.id,'select2')">
                    <option value="india">India</option>
                    <option value="russia">Russia</option>
                    <option value="usa">USA</option>
                    <option value="uk">United Kingdom</option>
                </select>
            </div><br>

            <div class="content2">
                <label for="">State : </label>
                <select name="" id="select2"></select>
            </div>

            <!-- button -->
            <button id="btn">Search</button>
        </div>
Enter fullscreen mode Exit fullscreen mode

now here is my Js file....below

// Dependent select box

function populate(s1,s2){
    let s1 = document.getElementById(s1);
    let s2 = document.getElementById(s2);

    s2.innerHTML = "";

    if(s1.value == "india"){
        let opArray = ["madhya pradesh|Madhya Pradesh","delhi|Delhi","uttar pradesh|Uttar Pradesh"];
    }
    else if(s1.value == "russia"){
        let opArray = ["adygeya|Adygeya","altay|Altay","amur|Amur"];
    }
    else if(s1.value == "usa"){
        let opArray = ["california|California","texas|Texas","florida|Florida"]
    }
    else if(s1.value = "uk"){
        let opArray = ["england|England","scotland|Scotland","wales|Wales"]
    }

    // for loop

    for(let option in opArray){
        let pair = opArray[option].split("|");
        let newOption = document.createElement("option");

        newOption.value = pair[0];
        newOption.innerHTML = pair[1];
        s2.option.add(newOption);
    }
};
Enter fullscreen mode Exit fullscreen mode

so here i want to do if i selected USA it should show USA state names inside second select box option and nothing else(i mean not other country state names) and similar to the other options... and after i selected both values or options when i click to the "Search" button of the web page it should show some details (which i want to show the user) of to that particular state or region ..

Collapse
 
mellen profile image
Matt Ellen-Tsivintzeli •

You have a variable called s2 that is both a string and a select box. The same for s1. It would probably be better to name those things differently to stop your code breaking.

e.g.

function populate(s1id,s2id){
    let s1 = document.getElementById(s1id);
    let s2 = document.getElementById(s2id);
...
}
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
ivadam00 profile image
ivadam00 •

thank you for your help .. i tried this but its not working...i need to figure out where is the mistake anyways..... do you have telegram/reddit/discord..
i need a mentor.. who can guide me in web development journey.. i started learning javascirpt.. i know little bit html and css

Thread Thread
 
mellen profile image
Matt Ellen-Tsivintzeli • • Edited

I don't have time to be a mentor, sorry.

You code is quite close. There are a couple of errors. You've fixed the first, i.e. naming the variables.

Next, you have a problem with scope. Variables declared with let are scoped to the block they are declared in.

In the following:

if(somethingThatIsTrue)
{
  let opArray = [1,2,3];
}
Enter fullscreen mode Exit fullscreen mode

opArray is scoped to the if block, which means outside the block it will not exist.

You need to declare opArray outside of your if blocks, and define it inside, e.g.:

let opArray;
if(somethingThatIsTrue)
{
  opArray = [1,2,3];
}
Enter fullscreen mode Exit fullscreen mode

Then you have a simple typo. It should be s2.options.add not s2.option.add. option*s*

Thread Thread
 
ivadam00 profile image
ivadam00 •

Thank you for your kind help.