如何在 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/