Question :--

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 :(

Comments

[Matt Ellen]

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

[ivadam00]

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>

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);
    }
};

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 ..

[Matt Ellen]

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);
...
}

[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

[Matt Ellen]

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];
}

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];
}

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

[ivadam00]

Thank you for your kind help.