How to use jquery to populate data in a dropdown implemented as a button and unordered list

Question

<div>
    <div>
        <button id="storageList" type="button" class="btn-phn btn btn-dropdown-white-uk dropdown-toggle col-xs-12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">64gb 
        </button>
        <ul id="storagedrop" class="dropdown-menu col-xs-12 p-l-0">
            <li> <a href="#">64gb</a> </li>
            <li> <a href="#">32gb</a> </li>
            <li> <a href="#">16gb</a> </li>       
            <li> <a href="#">8gb</a> </li>
        </ul>       
    </div>
    <div>
        <button id="colorList" type="button" class="btn-phn btn btn-dropdown-white-uk dropdown-toggle col-xs-12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Gold 
        </button>
        <ul id="colordrop" class="dropdown-menu col-xs-12 p-l-0">
            <li> <a href="#">red</a> </li>
            <li> <a href="#">green</a> </li>
            <li> <a href="#">blue</a> </li>       
            <li> <a href="#">yellow</a> </li>
        </ul>       
    </div>
</div>

On selection of 64,32,16,8gb the 2nd dropdown value should change. Say for 64gb the colors present are red and green only and for 32gb its only blue. So how to get these value by hardcoding the color values for selected value in the first dropdown. i.e if i click on 64gb on first dropdown it should show only red and green in the 2nd dropdown and similarly for others as well.

This is what i have tried:

$("#storagedrop > li").click(function(event){
          var storageListData = $(this).text();

            // if you click on memory then color will change
            if(storageListData.match('64gb'))
            {   
                document.getElementById('colorList').innerHTML = "Red 1";
                document.getElementById('colordrop').innerHTML = "Red 1"+ "<br />" +"Blue 1" + "<br />" +"Green";
            }
             if(storageListData.match('32gb'))
            {   
                document.getElementById('colorList').innerHTML = "Red 2";
                document.getElementById('colordrop').innerHTML = "Red 2"+ "<br />" +"Blue 2"+ "<br />" +"yellow";
            }
    });

But i dont want this 64gb to be hardcoded it should be fetched onclick and then upon clicking it should change color dropdown and one DOM element(below is the code where it should update after both dropdowns are selected)

$("#colordrop > li").click(function(event){
  var colorListData = $(this).text(); 
  console.log(colorListData);
  document.getElementById('price').innerHTML = colorListData;
    document.getElementById('colorList').innerHTML = colorListData;
});

Here color dropdown is updating a value in a DIV tag but i want a combination of both dropdowns to update the value. USE CASE: On selection of Storage i.e 64GB etc color should come(2nd dropdown values) and price value should be updated. Both events should occur. My code is updating values individually . Please guide.

Welcome to StackOverflow! Have you tried anything so far? StackOverflow isn't a free code-writing service, and expects you to [**try to solve your own problem first**](http://meta.stackoverflow.com/questions/261592). Please update your question to show what you have already tried, showcasing the specific problem you are facing in a [**minimal, complete, and verifiable example**](http://stackoverflow.com/help/mcve). For further information, please see [**how to ask good questions**](http://stackoverflow.com/help/how-to-ask), and take the [**tour of the site**](http://stackoverflow.com/tour) :) — Obsidian Age, Aug 28 '17 at 03:59
Possible duplicate of [Use jQuery to change a second select list based on the first select list option](https://stackoverflow.com/questions/10570904/use-jquery-to-change-a-second-select-list-based-on-the-first-select-list-option) — Obsidian Age, Aug 28 '17 at 04:02
I am new to jquery. it is marked as a duplicate by Obsidian but there the dropdown is implemented as But in my scenario it is implemented using a button and unordered list. — arjit bansal, Aug 28 '17 at 05:24

score 0 · Answer 1 · answered Aug 28 '17 at 08:45

I give you another example for you reference.

    $("#storagedrop > li").click(function(event)
                                                     {
                                                var storageListData = $(this).text();
                            var colordrop=$("#colordrop"); 
                            colordrop.empty();

                            child="<li>"+storageListData+"</li>";
                            colordrop.append(child);
                         }
      );

How to use jquery to populate data in a dropdown implemented as a button and unordered list

1 Answers1