CODEWITHSUNDEEP
javascripthtml
christinano
christinano

Reputation: 23

Dropdown selection display results from different <div>

<body>
  <label for="country">Country : </label>
  <select id="country">
    <option>Please select</option>
    <option name="CountryRevenue">Revenue</option>
    <option name="CountryQuantity">Quantity</option>
    <option name="CountryGrossMargin">Gross Margin</option>
  </select>
  <div id="results"></div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script>
    $("#country") = $(this).val();
    $("#results");
  </script>
</body>

How do I insert a different <div> as shown below as results? If revenue is chosen, first <div> will be run.

Upvotes: 0

Views: 79

Answers (3)

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve your expected result, use below option

  1. Change function to get selected value
  2. Check value using if condition
  3. Append required div based on the selected value using append() method

HTML:

<body>
    <label for="country">Country : </label>
    <select id="country">
        <option>Please select</option>
        <option name="CountryRevenue">Revenue</option>
        <option name="CountryQuantity">Quantity</option>
        <option name="CountryGrossMargin">Gross Margin</option>
    </select>
    <div id="results"></div>
</body>

CSS:

#Revenue{
    background: red;
}

#Quantity{
    background: green;
}

#Gross{
    background: yellow;
}

JS:

$("#country").change(function() {
    var x = $("#country option:selected").text()
    if (x == 'Revenue') {
        $('#results').append('<div id="Revenue" style="min-width: 400px; height: 400px; margin: 0 auto">');
    }

    if (x == 'Quantity') {
        $('#results').append('<div id="Quantity" style="min-width: 400px; height: 400px; margin: 0 auto">');
    }

    if (x == 'Gross Margin') {
        $('#results').append('<div id="Gross" style="min-width: 400px; height: 400px; margin: 0 auto">');
    }
})

Codepen: http://codepen.io/nagasai/pen/qNpzzx

Upvotes: 0

kennasoft
kennasoft

Reputation: 1593

Seems you are new to JS & HTML development. There are several errors in your code. The jquery in particular is not well formed. The select options should have value and not name;

You may want to pick up a book about jQuery or read the documentation online https://learn.jquery.com/ or do a tutorial. Before that you will want to also get some basic understanding of javascript at codecademy

I wish you the best on your journey!

$(function(){
  $('#country').on('change', function(){
      //hide all div inside the #results div
      $('#results div').hide();
      //show only the selected div (matched by select#country value)
      $('#'+$(this).val()).show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <label for="country">Country :</label>
  <select id="country">
    <option>Please select</option>
    <option value="Revenue">Revenue</option>
    <option value="Quantity">Quantity</option>
    <option value="GrossMargin">Gross Margin</option>
  </select>
  <div id="results">
    <!-- I prefer the html all in here, but hidden than inserting with js. Note the display: none; css style. -->
    <div id="Revenue" style="min-width: 400px; height: 400px; margin: 0 auto; display: none">Revenue</div>
    <div id="Quantity" style="min-width: 400px; height: 400px; margin: 0 auto; display: none">Quantity</div>
    <div id="GrossMargin" style="min-width: 400px; height: 400px; margin: 0 auto; display: none">Gross Margin</div>
  </div>

</body>

Upvotes: 1

bhanu09
bhanu09

Reputation: 61

You need to add values to the select options and then use the val() in your jquery code.

     <body>
    <label for="country">Country : </label>
    <select id="country">
      <option>Please select</option>
      <option value="Revenue" name="CountryRevenue">Revenue</option>
      <option value="Quantity" name="CountryQuantity">Quantity</option>
      <option value="GrossMargin" name="CountryGrossMargin">Gross Margin</option>
    </select>
    <div id="results"></div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
      $("#country").on("change", function() {
 var val = $(this).val();
        $("#results").html("<div id='" + val + "' style='min-width: 400px; height: 400px; margin: 0 auto' ></div>");
      })
    </script>

Upvotes: 0

Related Questions