CODEWITHSUNDEEP
javascripthtmljqueryhtml-select
Daryl Ch.
Daryl Ch.

Reputation: 37

select option created with var not displaying when adding a new field dynamically

I have a little problem here, when i add a new field the select option i created from var won't show. I have tried a multiple method like changing from id into class, add a var option name into <select> in var html and it still doesn't work. I suppose my JS nesting is the problem or something missing? If so any suggestion what code i must change or add here?

var data = {
            Food: [
                {
                    id: 1,
                    name: 'Fried Rice',
                    price: 10000
                },
                {
                    id: 2,
                    name: 'Fried Noodle',
                    price: 9000
                },
                {
                    id: 3,
                    name: 'Pancake',
                    price: 8500
                },
                {
                    id: 4,
                    name: 'French Fries',
                    price: 7500
                }
            ],
            Drink: [
                {
                    id: 1,
                    name: 'Cola',
                    price: 4600
                },
                {
                    id: 2,
                    name: 'Orange Juice',
                    price: 5400
                },
                {
                    id: 3,
                    name: 'Mineral Water',
                    price: 3500
                },
                {
                    id: 4,
                    name: 'Coffee',
                    price: 5800
                }
            ]
        }

        function handleChange() {
            var x = document.getElementById("category_select").value;

            var dataOptions = data[x]
            var dataSelect = document.getElementById('type_select')
            dataSelect.innerHTML = ''

            dataOptions.forEach(function (option) {
                var optionEle = document.createElement('option')
                optionEle.value = option.id
                optionEle.label = option.name
                optionEle.setAttribute('data-price', option.price)

                dataSelect.appendChild(optionEle)
            })

        }
        handleChange()

        $(".addRow").click(function () {
            var html = '';
            html += '<div class="row">';
            html += '<div class="col-md-3">';
            html += '<button type="button" class="btn btn-danger btn-lg delRow">Del</button>';
            html += '</div>';
            html += '<div class="col-md-3">';
            html += '<select class="form-select form-select-lg mb-3" id="category_select" onChange="handleChange()">';
            html += '<option value="Food">Food</option>';
            html += '<option value="Drink">Drink</option>';
            html += '</select>';
            html += '</div>';
            html += '<br>';
            html += '<div class="col-md-3">';
            html += '<select class="form-select form-select-lg mb-3" id="type_select">' + $("#type_select option:selected").attr('label') + '</select>'; //select option from var data didn't show here
            html += '</div>';
            html += '<div class="col-md-3">';
            html += '<input type="number" class="form-control form-control-lg mb-3" id="num" placeholder="Qty" min="0">';
            html += '</div>';
            html += '</div>';

            $('.container-fluid').append(html);
        });

        $(document).on('click', '.delRow', function () {
            $(this).closest('.row').remove();
        });

        $(document).ready(function () {
            var selectMenu = {};
            $(".order").click(function () {
                var itemName = $("#type_select option:selected").attr('label');
                var price = Number($("#type_select option:selected").data('price'));
                var count = Number($("#num").val());
                var total = price * count;
                selectMenu[itemName] = total
                var result = JSON.stringify(selectMenu).replace(/,/g, '<br>').replace(/\{|\}|"/g, "")

                $(".result").html(result);
            });

        });
button[type=submit] {
            width: 50%;
            margin-left: 25%;
            margin-right: 25%;
        }

        button[type=button] {
            font-size: 20px;
            width: 50%;
            margin-left: 25%;
            margin-right: 25%;
        }
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
    <div class="container">
        <div class="container-fluid text-center">
            <h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
            <br>
            <div class="row">
                <div class="col-md-3">
                    <button type="button" class="btn btn-primary btn-lg addRow">Add</button>
                </div>
                <div class="col-md-3">
                    <select class="form-select form-select-lg mb-3" id="category_select" onChange='handleChange()'>
                        <option value="Food">Food</option>
                        <option value="Drink">Drink</option>
                    </select>
                </div>
                <br>
                <div class="col-md-3">
                    <select class="form-select form-select-lg mb-3" id="type_select"></select>
                </div>
                <div class="col-md-3">
                    <input type="number" class="form-control form-control-lg mb-3" id="num" placeholder="Qty" min="0">
                </div>
            </div>
        </div>
    </div>
    <br>
    <button type="submit" class="btn btn-secondary order">Order</button>
    <br>
    <br>
    <div class="result text-center"></div>

Feel free to add some code or change the code as your preferences

Upvotes: 1

Views: 150

Answers (2)

Swati
Swati

Reputation: 28522

You can pass this inside your handleChange function where this refer to current select-box which is change then using that get other select-box reference and change values .

Demo Code :

var data = {
  Food: [{
      id: 1,
      name: 'Fried Rice',
      price: 10000
    },
    {
      id: 2,
      name: 'Fried Noodle',
      price: 9000
    },
    {
      id: 3,
      name: 'Pancake',
      price: 8500
    },
    {
      id: 4,
      name: 'French Fries',
      price: 7500
    }
  ],
  Drink: [{
      id: 1,
      name: 'Cola',
      price: 4600
    },
    {
      id: 2,
      name: 'Orange Juice',
      price: 5400
    },
    {
      id: 3,
      name: 'Mineral Water',
      price: 3500
    },
    {
      id: 4,
      name: 'Coffee',
      price: 5800
    }
  ]
}

function handleChange(el) {
  //if undefined use closest & find to get select value
  var els_cat = (el != undefined) ? $(el).closest(".outer").find(".cat").val() : $("#category_select").val()
  console.log(els_cat)
  var els_type = (el != undefined) ? $(el).closest(".outer").find(".type") : $("#type_select")
  var dataOptions = data[els_cat]
  els_type.html('') //empty
  dataOptions.forEach(function(option) {
    var optionEle = document.createElement('option')
    optionEle.value = option.id
    optionEle.label = option.name
    optionEle.setAttribute('data-price', option.price)
    els_type.append(optionEle) //append same
  })
}
handleChange()

$(".addRow").click(function() {
  var cloned = $("#type_select").clone() //cloned select
  var html = '';
  //added one outer class
  html += '<div class="row outer">';
  html += '<div class="col-md-3">';
  html += '<button type="button" class="btn btn-danger btn-lg delRow">Del</button>';
  html += '</div>';
  html += '<div class="col-md-3">';
  html += '<select class="form-select form-select-lg mb-3 cat" onChange="handleChange(this)">'; //use clone for this as well if needed same options ..
  html += '<option value="Food">Food</option>';
  html += '<option value="Drink">Drink</option>';
  html += '</select>';
  html += '</div>';
  html += '<br>';
  html += '<div class="col-md-3">';
  html += '<select class="form-select form-select-lg mb-3 type">' + $(cloned).html() + '</select>'; //pass same
  html += '</div>';
  html += '<div class="col-md-3">';
  html += '<input type="number" class="form-control form-control-lg mb-3" id="num" placeholder="Qty" min="0">';
  html += '</div>';
  html += '</div>';

  $('.container-fluid').append(html);
});
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="container">
  <div class="container-fluid text-center">
    <h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
    <br>
    <!--added classs-->
    <div class="row outer">
      <div class="col-md-3">
        <button type="button" class="btn btn-primary btn-lg addRow">Add</button>
      </div>
      <div class="col-md-3">
        <!--added class cat -->
        <select class=" form-select form-select-lg mb-3 cat" id="category_select" onChange='handleChange(this)'>
          <option value="Food">Food</option>
          <option value="Drink">Drink</option>
        </select>
      </div>
      <br>
      <div class="col-md-3">
        <!--added class cat -->
        <select class="form-select form-select-lg mb-3 type" id="type_select"></select>
      </div>
      <div class="col-md-3">
        <input type="number" class="form-control form-control-lg mb-3" id="num" placeholder="Qty" min="0">
      </div>
    </div>
  </div>
</div>
<br>
<button type="submit" class="btn btn-secondary order">Order</button>
<br>
<br>
<div class="result text-center"></div>

Upvotes: 1

Dickens A S
Dickens A S

Reputation: 4054

Use handlebars

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js" integrity="sha512-zT3zHcFYbQwjHdKjCu6OMmETx8fJA9S7E6W7kBeFxultf75OPTYUJigEKX58qgyQMi1m1EgenfjMXlRZG8BXaw==" crossorigin="anonymous"></script>

Code

<script>
    var master_data = {
        Food: [
            {
                id: 1,
                name: 'Fried Rice',
                price: 10000
            },
            {
                id: 2,
                name: 'Fried Noodle',
                price: 9000
            },
            {
                id: 3,
                name: 'Pancake',
                price: 8500
            },
            {
                id: 4,
                name: 'French Fries',
                price: 7500
            }
        ],
        Drink: [
            {
                id: 1,
                name: 'Cola',
                price: 4600
            },
            {
                id: 2,
                name: 'Orange Juice',
                price: 5400
            },
            {
                id: 3,
                name: 'Mineral Water',
                price: 3500
            },
            {
                id: 4,
                name: 'Coffee',
                price: 5800
            }
        ]
    };
    function updateList() {
        var source = $("#template1").html();
        var template = Handlebars.compile(source);
        $('body').html(template(list_data));
        for(var i=0;i<list_data.data.length;i++) {
            $('.category_select').eq(i).val(list_data.data[i].key)
        }
    }
    var list_data = {"data":[]};
    list_data.data.push({"type":master_data.Food, "key":"Food"})
    $(document).ready(function(){
         var source = $("#template1").html(); 
         var template = Handlebars.compile(source); 
         $('body').html(template(list_data));
         $(document).on("click", ".addRow", function(event){
            event.preventDefault()
            var index = event.target.getAttribute('row')
            var selectedItem = $('.category_select').eq(index).val();
            if(selectedItem == "Food") {
                list_data.data.push({"type":master_data.Food,"key":selectedItem})
            }
            else if(selectedItem == "Drink") {
                list_data.data.push({"type":master_data.Drink,"key":selectedItem})
            }
            updateList()
         });
         $(document).on("change", ".category_select", function(event){
            event.preventDefault()
            var index = event.target.getAttribute('row')
            var selectedItem = $('.category_select').eq(index).val();
            if(selectedItem == "Food") {
                list_data.data[index] = {"type":master_data.Food,"key":selectedItem}
            }
            else if(selectedItem == "Drink") {
                list_data.data[index] = {"type":master_data.Drink,"key":selectedItem}
            }
            updateList()
         });
    });
    </script>

Template

<script id="template1" type="text/x-handlebars-template">
    <div class="container">
        <div class="container-fluid text-center">
            <h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
            <br/>
            {{#data}}
            <div class="row">
                <div class="col-md-3">
                    <button type="button" class="btn btn-primary btn-lg addRow" row="{{@index}}">Add</button>
                </div>
                <div class="col-md-3">
                    <select class="form-select form-select-lg mb-3 category_select" row="{{@index}}">
                        <option value="Food">Food</option>
                        <option value="Drink">Drink</option>
                    </select>
                </div>
                <br>
                <div class="col-md-3">
                    <select class="form-select form-select-lg mb-3 type_select">
                        {{#type}}
                            <option value="{{name}}">{{name}}</option>
                        {{/type}} 
                    </select>
                </div>
                <div class="col-md-3">
                    <input type="number" class="form-control form-control-lg mb-3" id="num" placeholder="Qty" min="0">
                </div>
            </div>
            {{/data}}
        </div>
    </div>
</script>

Upvotes: 1

Related Questions