Dropdown selection display results from different <div>
Question
<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.
if revenue chosen ->
<div id="Revenue" style="min-width: 400px; height: 400px; margin: 0 auto">if quantity chosen ->
<div id="Revenue" style="min-width: 400px; height: 400px; margin: 0 auto">
3 answers
solution1
1 2016-07-17 04:48:47
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>
solution2
0 2016-07-17 04:38:17
To achieve your expected result, use below option
- Change function to get selected value
- Check value using if condition
- 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
solution3
0 2016-07-17 04:42:47
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.