CODEWITHSUNDEEP
javascriptjqueryhtml
frianH
frianH

Reputation: 7563

Select option value based on another select option in dynamic table

I have a table that changes the number of rows

<html>
    <head>
    <title>no Title</title>
    <script type="text/javascript">
        //what to do?
    </script>
    </head>
<body>

    <datalist>
        //land
        //water
        //air
        //what to do?
    </datalist>

<table id="animal">
    <tr>
        <th>Animal Category</th>
        <th>Select Animal</th>
    </tr>
    <tr>
        <td>
            <select>
                <option selected>Please select</option>
                <option value="land">Land</option>
                <option value="air">Air</option>
                <option value="water">Water</option>
            </select>
        </td>
        <td>
            <select>
                <option selected>Please select</option>
                //what to do?
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <select>
                <option selected>Please select</option>
                <option value="land">Land</option>
                <option value="air">Air</option>
                <option value="water">Water</option>
            </select>
        </td>
        <td>
            <select>
                <option selected>Please select</option>
                //what to do?
            </select>
        </td>
    </tr>
</table>

<script src="myProject/js/jquery.min.js"></script>
</body>
</html>

Let's say there are currently 2 rows, then in each row, there is 'Select Animal' which can be selected according to the 'Animal Category' option. For example, I chose 'land' in 'Animal category' then what appears in 'Select Animal' is -> cat, dog, chicken

For example I have 3 lists (land, air, water)

land -> cat, dog, chicken, etc
water -> fish, octopus, shrimp, etc
air -> bird, etc

Every list I want to place in the datalist because it can change in number, I've download jquery library. where do I start ?

Upvotes: 1

Views: 1855

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

Store your animals inside an Object literal

And than you could do like:

const categories = {
  land:  ["cat", "dog", "chicken"],
  water: ["fish", "octopus", "shrimp"],
  air:   ["bird", "dragon"]
};
const options = Object.keys( categories ).map(pr => `<option value="${pr}">${pr}</option>`);

$("[data-target]").append( options ).on('change', function() {
  const $targ = $(this.dataset.target).prop("disabled", false);
  $targ.find("option:not(:disabled)").remove(); // Remove all but first option
  $targ.append(categories[this.value].map(val => `<option value="${val}">${val}</option>`)); // Append new options
});
select {text-transform: capitalize;}
<select data-target="#anim"><option selected disabled>Select Category</option></select>
<select id="anim" disabled><option selected disabled>Select animal</option></select>

<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>

Upvotes: 0

user8094363
user8094363

Reputation:

The easiest way is to make just two selects and add some classes on it. Then filter by classes or attributes. I've done by class on this example.

document.getElementById("main_select").onchange = function(){
  
  let selector = document.getElementById('main_select');
  let value = selector[selector.selectedIndex].value;
    
  let nodeList = document.getElementById("sub_select").querySelectorAll("option");
  
  nodeList.forEach(function(option){
   
   if(option.classList.contains(value)){
      option.style.display="block";
    }else{
      option.style.display="none";
    }
    
  });  
}
<html>
    <head>
    <title>no Title</title>
    </head>
<body>
<table id="animal">
    <tr>
        <td>
            <select id="main_select">
                <option selected>Please select</option>
                <option value="land">Land</option>
                <option value="air">Air</option>
                <option value="water">Water</option>
            </select>
        </td>
        <td>
            <select id="sub_select">
                  <option selected>Please select</option>
                  <option class="land" value="cat">cat</option>
                  <option class="land" value="dog">dog</option>
                  <option class="land" value="chicken">chicken</option>
                  <option class="water" value="fish">fish</option>
                  <option class="water" value="octopus">octopus</option>
            </select>
        </td>
    </tr>
</table>

Upvotes: 1

Related Questions