Как отобразить тег li в JavaScript или как отобразить тег 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 %}
                                         <li><p id="optprice">{{value.extra_cost}}</p><option id="value" value="{{value.value_code}}">{{value.name}} (+{{value.extra_cost}}원)</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;'><p style='font-size: 17px; color: #637B46'>"+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>

Demo jsfiddle : https://jsfiddle.net/k60Lb38f/4/

Demo jsfiddle (получить значение) : https://jsfiddle.net/k60Lb38f/7/

Вернуться на верх