JavaScript dependent

Question

I have two drop downs dependent on each other.

When I'm selecting the FRUIT, I want to show only one Apple value from select2 and hide all the others but when I'm selecting Animal I want to show all the values Please help me write the Javascript function.

Thanks.

 <select name="select1" id="select1">
    <option value="1">Fruit</option>
    <option value="2">Animal</option>
    <option value="3">Bird</option>
    <option value="4">Car</option>
</select>

<select name="select2" id="select2">
    <option value="1">Banana</option>
    <option value="1">Apple</option>
    <option value="1">Orange</option>
    <option value="2">Wolf</option>
    <option value="2">Fox</option>
    <option value="2">Bear</option>
    <option value="3">Eagle</option>
    <option value="3">Hawk</option>
    <option value="4">BWM<option>
</select>



 //This is my java script function

        function display(){
                                var access=document.getElementById("select1");
                                var list = document.getElementById("select2");
                                var selectlist=access[access.selectedIndex].value;

                                    if(selectlist="APPLE"){
                            list.style.visiblity="hidden";
                                            }else{
                                        list.style.visiblity="block";
                                    }

That might be a simple typo seeing that `td>` .. plus what is your question? It is very vague what you are asking for. Also, are you using `angularjs`? — Clemens Himmer, Jan 08 '16 at 09:13
No I am not using angular js nor J Query.it is plain java script.I have two dropdowns and after selecting one selected value from the first dropdown i need to display only one value from five values in the second dropdown and hide all the four values.Again If i am selecting as second value from first dropdown this time it should not restrict to one value and should display all the values. — John, Jan 08 '16 at 09:24
On the selected value of first dropdown it is showing all the values in second drop down.It is not hiding the values in the second drop down — John, Jan 08 '16 at 09:39
Very confused what these `${stateLevel.value}` and so on do.. maybe check this, i cannot look into your code enought to help you just now, but this should help: [Use jQuery to change a second select list based on the first select list option](http://stackoverflow.com/questions/10570904/use-jquery-to-change-a-second-select-list-based-on-the-first-select-list-option) — Clemens Himmer, Jan 08 '16 at 09:44

score 0 · Accepted Answer · answered Jan 08 '16 at 10:37

0

FIDDLE

//Add eventlistener for change-event
document.getElementById("selCategory").addEventListener("change", filter, false);

//Filter function which will filter on selected value from first select.
function filter()
{
 var cat = document.getElementById("selCategory");
  var opt = document.getElementById("selOptions");
  var selectedValue = cat.options[cat.selectedIndex].value;
  var firstEl = false;
  var firstIndex = 0;
  
  for(var i = 0; i < opt.options.length; i++)
  {
   if(opt.options[i].value !== selectedValue)
    {
     opt.options[i].style.display = "none";
    }
    else
    {
     opt.options[i].style.display = "block";
      if(!firstEl)
      {
       firstIndex = i;
        firstEl = true;
      }
    }
  }
  
  opt.value = opt.options[firstIndex].value;
}

//Execute on first load, second select is filtered from the start.
filter();

<select name="category" id="selCategory">
  <option value="1">Fruit</option>
  <option value="2">Animal</option>
  <option value="3">Bird</option>
  <option value="4">Car</option>
</select>

<select name="options" id="selOptions">
    <option value="1">Banana</option>
    <option value="1">Apple</option>
    <option value="1">Orange</option>
    <option value="2">Wolf</option>
    <option value="2">Fox</option>
    <option value="2">Bear</option>
    <option value="3">Eagle</option>
    <option value="3">Hawk</option>
    <option value="4">BWM<option>
</select>

answered Jan 08 '16 at 10:37

Jorrex

1,503
3
13
32

I don't know how or why you would restrict the first option to only "Apple" because that would mean you'd have to hardcode it. But it wouldn't be impossible, but this code could give you a headstart. – Jorrex Jan 08 '16 at 10:40
Thanks for the reply.The values is coming from back end.Let me put this way .Let say. and the for 'FRUIT' i want to show apple but for "Fruit2".I want to show Banana,Apple,Orange..I know it is a bit vauge but i hope you could understand. – John Jan 08 '16 at 11:00
The problem is that you only have 1 option `Fruit`and the options `Banana, Apple, Orange` have their value set at the value of `Fruit` (meaning they are linked to that one option). If you want to show `Apple`when you select `Fruit`, you will have to change the values of `Banana`and `Orange` so they won't be linked to `Fruit`anymore. That's what I'm understanding from your question. Otherwise you would have to use 3 ` – Jorrex Jan 08 '16 at 11:04
If I have two option Fruit and Fruit1 and the options Banana, Apple, Orange have their value set at both the value of Fruit and Fruit1.Now can i hide the value of Banana,Orange and show only Apple for Fruit.But For Fruit1 I want to show all the value( Banana,Orange and Apple).IS there any way we can achive this through plain java script. – John Jan 08 '16 at 11:39
Not that I can think of at this particular moment. There might be a workaround, but I cannot think of one right now. – Jorrex Jan 08 '16 at 12:24
If you could find a solution .I will be very thankful of you. – John Jan 08 '16 at 17:42

JavaScript dependent

1 Answers1