CODEWITHSUNDEEP
javascripthtml
user3128376
user3128376

Reputation: 994

Change options in a drop-down list depending on another selected drop-down list

I'm trying to do this which you have a dropdown list and depending what you select, the next dropdown list will have different options.

I have my codes in jsfiddle

<!DOCTYPE html>
<html>
<body>   

<select id="diffList" onchange="changeList()"> 
  <option value="">-- Difficulty --</option> 
  <option value="1">Easy</option> 
  <option value="2">Medium</option> 
  <option value="3">Difficult</option> 
</select> 

<select id="numbList"></select> 

<script>
var difficulty = {};
difficulty['1'] = [1,2,3];
difficulty['2'] = [4,5,6];
difficulty['3'] = [7,8,9];

function changeList() {
    var diffList = document.getElementById("diffList");
    var numbRange = document.getElementById("numbList");
    var selectDiff = diffList.options[diffList.selectIndex].value;
    while(numbRange.options.length)
    {
        numbRange.remove(0);
    }
    var diff = difficulty[selectDiff];
    if(diff)
    {
        var i;
        for(i = 0; i < diff.length; i++)
        {
            var difficulty = new Option(diff[i], i);
            numbRange.options.add(difficulty);
        }
    }
}
</script>

</body>
</html>

The problem I'm encountering is the next droplist is not showing any options. I've look through my codes many times and I still can't seem to find out what's wrong with it. Would someone mind looking over it and let me know?

Thanks a lot.

Upvotes: 0

Views: 1166

Answers (3)

azaviruha
azaviruha

Reputation: 897

Here is working code (tested only ib Chrome).

The one problem was here - for loop does not create nested scope in JS, so it shadowed global variable difficulty

for(i = 0; i < diff.length; i++) {
    var difficulty = new Option(diff[i], i);
    ...

Upvotes: 1

Alexa Y
Alexa Y

Reputation: 1854

I think the primary problem here was javascript scoping within functions. If difficulty is defined outside the context of the function, it needs to be defined as a global by being attached to window

<!DOCTYPE html>
<html>
<body>   

<select id="diffList" onchange="changeList()"> 
  <option value="">-- Difficulty --</option> 
  <option value="1">Easy</option> 
  <option value="2">Medium</option> 
  <option value="3">Difficult</option> 
</select> 

<select id="numbList"></select> 

<script>
window.difficulty = {};
window.difficulty['1'] = [1,2,3];
window.difficulty['2'] = [4,5,6];
window.difficulty['3'] = [7,8,9];

function changeList() {
    var diffList = document.getElementById("diffList");
    var numbRange = document.getElementById("numbList");
    var selectDiff = diffList.options[diffList.selectedIndex].value;
    while(numbRange.options.length)
    {
        numbRange.remove(0);
    }
    var diff = window.difficulty[selectDiff];
    if(diff)
    {
        var i;
        for(i = 0; i < diff.length; i++)
        {
            var difficulty = new Option(diff[i], i);
            numbRange.options.add(difficulty);
        }
    }
}
</script>

</body>
</html>

Upvotes: 0

Anatoliy Arkhipov
Anatoliy Arkhipov

Reputation: 691

Ok, let's do it:

  1. You should not use onchange="changeList()" on jsfiddle beause it wraps your code into the onclick handler and the changeList function does not visible from the outer scope.
  2. You should use diffList.value for detect the currently selected value in the first selectbox: var selectDiff = diffList.value;
  3. Do not name the new option variable difficulty - it overrides the difficulty variable from the outer scope. Name it option, for example: var option = new Option(diff[i], i);
  4. Add the event listener for diffList from JS: diffList.addEventListener('change', changeList)

http://jsfiddle.net/h3hbovar/4/

Upvotes: 1

Related Questions