Branding Roses & Tulips The logic is like this:


All brands have 2 products (Rose and Tulip)
Each brand names their product name differently (such as Brand 1 names their rose as No. 1 Rose and Brand 2 names their rose as No. 2 Rose )
All brands don't have products from all countries (Such as Brand 1 has Roses from USA and US whereas Brand 2 has Roses from Canada and China)


This is the working prototype of this function given below (Or, the fiddle):



$(document).ready(function() {

    $(document).on("input", "#intBrand, #intProcudt", function() {

        var intBrand = $('#intBrand').val();
        var intProcudt = $('#intProcudt').val();

        if (intBrand == "bAll") {
            if (intProcudt == "rose") {
                product = 'Rose';
            } else if (intProcudt == "tulip") {
                product = 'Tulip';
            }
        } else if (intBrand == "b1") {
            if (intProcudt == "rose") {
                product = 'No. 1 Rose';
            } else if (intProcudt == "tulip") {
                product = 'No. 1 Tulip';
            }
        } else if (intBrand == "b2") {
            if (intProcudt == "rose") {
                product = 'No. 2 Rose';
            } else if (intProcudt == "tulip") {
                product = 'No. 2 Tulip';
            }
        }

        var item1 = product + ' from US(1)&lt;br&gt;';
        var item2 = product + ' form USA(2)&lt;br&gt;';
        var item3 = product + ' from Canada(3)&lt;br&gt;';
        var item4 = product + ' from China(4)&lt;br&gt;';


        if (intBrand == "bAll") {
            roseP = item1 + item2 + item3 + item4;
            tulipP = item1 + item2 + item4;
        } else if (intBrand == "b1") {
            roseP = item1 + item2;
            tulipP = item1;
        } else if (intBrand == "b2") {
            roseP = item3 + item4;
            tulipP = item3 + item4;
        }

        $('#allRoseItems').html(roseP);
        $('#allTulipItems').html(tulipP);

    });

    $("#intBrand").trigger("input");
});
&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="row"&gt;
   &lt;div class="col-6"&gt;
      &lt;b&gt;Select Brand:&lt;/b&gt;&lt;br&gt;
      &lt;select id="intBrand" name="intBrand" required&gt;
         &lt;option value="bAll" &gt;All items&lt;/option&gt;
         &lt;option value="b1" selected&gt;Brand 1&lt;/option&gt;
         &lt;option value="b2" &gt;Brand 2&lt;/option&gt;
      &lt;/select&gt;
   &lt;/div&gt;
   &lt;div class="col-6"&gt;
      &lt;b&gt;Select Product:&lt;/b&gt;&lt;br&gt;
      &lt;select id="intProcudt" name="intProcudt" required&gt;
         &lt;option value="rose" &gt;Rose&lt;/option&gt;
         &lt;option value="tulip"&gt;Tulip&lt;/option&gt;
      &lt;/select&gt;
   &lt;/div&gt;
&lt;/div&gt;
&lt;div class="container"&gt;
   &lt;div id="allRoseItems"&gt;&lt;/div&gt;
   &lt;br&gt;
   &lt;div id="allTulipItems"&gt;&lt;/div&gt;
&lt;/div&gt;




My question is just keeping the following section untouched, could it be built in a better way? 

var item1 = product + ' from US(1)&lt;br&gt;';
var item2 = product + ' form USA(2)&lt;br&gt;';
var item3 = product + ' from Canada(3)&lt;br&gt;';
var item4 = product + ' from China(4)&lt;br&gt;';


I'd really appreciate your suggestions on how it could be written in a more efficient way with fewer lines of code.
I was in the process of answering your question on StackOverflow but it was moved to Code Review -- so I'll answer it here.

You might be able to avoid using switch or multiple if conditions if you build a data structure that fits your needs.



$(function() {

  // data structure
  var products = {
    bAll: {
      rose: {
        name: 'Rose',
        countries: ['US(1)', 'USA(2)', 'Canada(3)', 'China(4)']
      },
      tulip: {
        name: 'Tulip',
        countries: ['US(1)', 'USA(2)', 'China(4)']
      }
    },
    b1: {
      rose: {
        name: 'No. 1 Rose',
        countries: ['US(1)', 'USA(2)']
      },
      tulip: {
        name: 'No. 1 Tulip',
        countries: ['US(1)']
      }
    },
    b2: {
      rose: {
        name: 'No. 2 Rose',
        countries: ['USA(3)', 'China(4)']
      },
      tulip: {
        name: 'No. 2 Tulip',
        countries: ['USA(3)', 'China(4)']
      }
    }
  };

  $(document).on("input", "#intBrand, #intProcudt", function() {

    var intBrand = $('#intBrand').val();
    var intProcudt = $('#intProcudt').val();

    // using the data structure, it makes it much easier to get information

    // get product
    var product = products[intBrand][intProcudt]['name'];

    // get rose countries
    var roseCountries = products[intBrand]['rose']['countries'];

    // get tulip countries
    var tulipCountries = products[intBrand]['tulip']['countries'];

    // build HTML string using product's rose countries
    var roseP = roseCountries.map(function(country) {
      return product + ' from ' + country;
    }).join('&lt;br /&gt;');

    // build HTML string using product's tulip countries
    var tulipP = tulipCountries.map(function(country) {
      return product + ' from ' + country;
    }).join('&lt;br /&gt;');

    $('#allRoseItems').html(roseP);
    $('#allTulipItems').html(tulipP);
  });

  $("#intBrand").trigger("input");

  // alternate way is to get the data from a JSON file
  // instead of having the large data in our file;

  // you would need to wait for the response from the $.getJSON
  // before triggering the initial load automatically

  /*
  var products;
  $.getJSON('path/products.json', function (res) {
      // store the data, so that we can use it
      products = res;
      // trigger initial oninput
      $("#intBrand").trigger("input");
  });
  */
});
&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="row"&gt;
  &lt;div class="col-6"&gt;
    &lt;b&gt;Select Brand:&lt;/b&gt;&lt;br&gt;
    &lt;select id="intBrand" name="intBrand" required&gt;
      &lt;option value="bAll"&gt;All items&lt;/option&gt;
      &lt;option value="b1" selected&gt;Brand 1&lt;/option&gt;
      &lt;option value="b2"&gt;Brand 2&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class="col-6"&gt;
    &lt;b&gt;Select Product:&lt;/b&gt;&lt;br&gt;
    &lt;select id="intProcudt" name="intProcudt" required&gt;
      &lt;option value="rose"&gt;Rose&lt;/option&gt;
      &lt;option value="tulip"&gt;Tulip&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="container"&gt;
  &lt;div id="allRoseItems"&gt;&lt;/div&gt;
  &lt;br&gt;
  &lt;div id="allTulipItems"&gt;&lt;/div&gt;
&lt;/div&gt;




You should also cache your jQuery objects if you are going to be re-using them. There's no need to search the DOM every time.