Hari Hari - 4 months ago 60
jQuery Question

populating a dropdown based on selection of another dropdown value not accepting numeric values

I need to write a code where i need to populate a dropdown based on the selection of another dropdown where in need to give values of dropdown as numeric value, but script.js not accepting any numeric value instead its treating it as a decimal value..Am quite new to this concept please help me to resolve this issue, thank you

data.json

{
"1": "coke,pepsi",
"2":"chips,biscuit"
}


index.html

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="script.js"></script>
</head>

<body>
<div class="form-group">
<select id="json-one" class="form-control">
<option selected="" value="base">Please Select</option>
<option value="1">Beverages</option>
<option value="2">Snacks</option>
</select>
</div>
<div class="form-group">
<select id="json-two" class="form-control">
<option>Please choose from above</option>
</select>
</div>
</body>

</html>


script.js

$(function() {
$("#json-one").change(function() {

var $dropdown = $(this);

$.getJSON("data.json", function(data) {


var key = $dropdown.val();
var vals = [];

switch(key) {
case 'beverages':
vals = data['1'].split(",");
break;
case 'snacks':
vals = data['2'].split(",");
break;
case 'base':
vals = ['Please choose from above'];
}

var $jsontwo = $("#json-two");
$jsontwo.empty();
$.each(vals, function(index, value) {
$jsontwo.append("<option>" + value + "</option>");
});

});
});



});

Answer

Use bracket-notation to access the data from response

An object property name can be any valid JavaScript string, or anything that can be converted to a string, including the empty string. However, any property name that is not a valid JavaScript identifier (for example, a property name that has a space or a hyphen, or that starts with a number) can only be accessed using the square bracket notation.

Another issue is your option value is 0 or 1 but in switch, you are testing it with case Beverages and Snacks, Change it with 0 and 1

$("#json-one").change(function() {
  var $dropdown = $(this);
  var data = {
    "1": "coke,pepsi",
    "2": "chips,biscuit"
  };
  var key = $dropdown.val();
  var vals = [];
  switch (key) {
    case '1':
      vals = data['1'].split(",");
      break;
    case '2':
      vals = data['2'].split(",");
      break;
    case 'base':
      vals = ['Please choose from above'];
  }
  var $jsontwo = $("#json-two");
  $jsontwo.empty();
  $.each(vals, function(index, value) {
    $jsontwo.append("<option>" + value + "</option>");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="form-group">
  <select id="json-one" class="form-control">
    <option selected="" value="base">Please Select</option>
    <option value="1">Beverages</option>
    <option value="2">Snacks</option>
  </select>
</div>
<div class="form-group">
  <select id="json-two" class="form-control">
    <option>Please choose from above</option>
  </select>
</div>

Simplified code:

$("#json-one").change(function() {
  var $dropdown = $(this);
  var data = {
    "1": "coke,pepsi",
    "2": "chips,biscuit"
  };
  var key = $dropdown.val();
  var vals = data[key] ? data[key].split(",") : ['Please choose from above'];
  var $jsontwo = $("#json-two");
  $jsontwo.empty();
  $.each(vals, function(index, value) {
    $jsontwo.append("<option>" + value + "</option>");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="form-group">
  <select id="json-one" class="form-control">
    <option selected="" value="base">Please Select</option>
    <option value="1">Beverages</option>
    <option value="2">Snacks</option>
  </select>
</div>
<div class="form-group">
  <select id="json-two" class="form-control">
    <option>Please choose from above</option>
  </select>
</div>