下拉选择显示结果不同<div>
[英]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? 
如何插入另一个如下所示的<div>作为结果？ If revenue is chosen, first <div> will be run. 如果选择了收入，则将运行第一个<div> 。
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 个解决方案
解决方案1
1 2016-07-17 04:48:47
Seems you are new to JS & HTML development. 似乎您是JS＆HTML开发的新手。 There are several errors in your code. 您的代码中有几个错误。 The jquery in particular is not well formed. 特别是jquery格式不正确。 The select options should have value and not name ; 选择选项应该有value而不是name ;
You may want to pick up a book about jQuery or read the documentation online https://learn.jquery.com/ or do a tutorial . 您可能想找一本有关jQuery的书，或者在线阅读文档https://learn.jquery.com/或做一个教程 。 Before that you will want to also get some basic understanding of javascript at codecademy 在此之前，您还需要在codecademy上对javascript有一些基本的了解。
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>
解决方案2
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 使用if条件检查值
- Append required div based on the selected value using append() method 使用append（）方法根据所选值附加所需的div
HTML: 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: CSS：
#Revenue{
background: red;
}
#Quantity{
background: green;
}
#Gross{
background: yellow;
}
JS: 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 Codepen： http ：//codepen.io/nagasai/pen/qNpzzx
解决方案3
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. 您需要将值添加到选择选项，然后在jquery代码中使用val（）。
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.