javascript - 如何在 JavaScript 中显示 li 标签或如何显示 p 标签
问题描述
我想用 Django 和 JavaScript 完成以下代码。我想要的是
<li><p id="optprice">{{value.extra_cost}}</p><option id="value" value="{{value.value_code}}">{{value.name} } (+{{value.extra_cost}}won)</option></li>
在这部分<p id="optprice">{{value.extra_cost}}</p>
我想浮动这个。所以在javascript中
var optprice = $("#optprice").text();
我做了这个,但它没有出现。有什么问题?任何帮助,将不胜感激。
<form method="POST" action="{% url 'zeronine:join_create' id=product.product_code %}">
<div class="form-group row" style="margin-top: -5px">
<label for="optionSelect" class="col-sm-6 col-form-label"><b>옵션</b></label>
<div class="col-sm-6" style="margin-left: -90px;">
<select type="text" class="form-control" name="value_code" id="optionSelect" value="{{ form.value_code }}">
<option value="none">옵션을 선택하세요.</option>
{% for option in option_object %}
{% if option.option_code.option_code.option_code == value.option_code %}
{%if option.product_code == product %}
<optgroup label="{{option.name}}">
{% for value in value_object %}
{% if value.option_code.option_code == option.option_code %}
{%if value.product_code == product %}
<option value="{{value.extra_cost}}">{{value.name}} (+{{value.extra_cost}}원)<option id="optprice" style="display: none">{{value.extra_cost}}</option></option></li>
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% endfor %}
</optgroup>
</select>
</div>
<div id="selectOptionList" style="margin-top:10px; margin-left: 20px; margin-bottom: -10px;"></div>
</div>
<script>
$().ready(function() {
$("#optionSelect").change(function(){
var checkValue = $("#optionSelect").val();
var checkText = $("#optionSelect option:selected").text();
var product = $("#productname").text();
var optprice = $("#optprice").text();
if (checkValue != "no") { // 없음 선택 아닐경우
var whtml = "<hr style='width: 300px; margin-bottom: 30px;'><p style='font-size: 17px;'>"+product+"</p><p style='font-size: 16px; margin-top: -10px; margin-bottom: 20px;'>"+checkText+"</p><p style='font-size: 16px; margin-top: -10px; margin-bottom: 20px;'>"+optprice+"</p>";
$("#selectOptionList").append(whtml);
}
});
});
</script>
解决方案
也许是这样的
$(document).ready(function() {
$("#optionSelect").change(function(){
var label = $(this.options[this.selectedIndex]).prop('text');
$('#result').text(label)
console.log(label);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select type="text" class="form-control" name="value_code" id="optionSelect" value="form.value_code">
<option value="none">옵션을 선택하세요.</option>
<optgroup label="title-name">
<li>
<p id="optprice">value.extra_cost-1</p>
<option id="value" value="value_code">value.name extra_cost 1-원</option>
</li>
<li>
<p id="optprice">value.extra_cost-2</p>
<option id="value" value="value_code">value.name extra_cost 2-원</option>
</li>
</optgroup>
</select>
<br>
RESULT : <label id="result">-</label>
演示 jsfiddle:https ://jsfiddle.net/k60Lb38f/4/
演示 jsfiddle(获取值):https ://jsfiddle.net/k60Lb38f/7/
推荐阅读
- python - 字符未被拾取
虽然它在 Windows 上运行良好,但在 mac 上,我一直试图用来使角色移动的键 w、a、s 和 d 没有被
我不知道如何解决这个错误,因为
- python-3.x - google drive api v3 (python) 更新文件权限“角色”
- python-3.x - Selenium 拖放功能如何在幕后工作?
- go - 如何在 go 包之间共享 c 代码?
- python - 如何通过调用嵌套类中的静态调用方法来更改对象的实例属性
- amazon-web-services - EsHadoopIllegalArgumentException:没有启用 HTTP 的数据节点可用(HTTPS 问题)
- wso2 - 如何在端口 443 上绑定 WSO2 但它应该在 8445 上运行
- python-3.x - 忽略特定 flake8-docstrings 错误的整个文件夹
- python - django中的2级用户
- pyinstaller - PyInstaller:我在哪里可以找到我的应用程序的输出(控制台中不显示任何内容)?