如何在JavaScript中显示li标记或如何显示p标记

Question

我想用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>

Answer 1

也许有类似的东西

$(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/