Django 大小（下拉菜单）和颜色（单选按钮）随着单选按钮数据 JQuery 的变化 prices/images

Question

我想 hide/show 选择不同尺寸（下拉菜单）时的颜色（单选按钮）。

像这样：红色 - 16Gb、蓝色和红色 32Gb。但不是显示红色、蓝色和红色，它应该只在 16Gb 时显示红色，而在 32Gb 时只显示蓝色和红色（所有都是我从管理面板添加的单独产品）

我的HTML是：

<form id='add-form' method='POST' action="{% url 'cart' %}">
                                                
  <h3 id='price'>{{ object.variation_set.first.price }}</h3>

  <br/>
  <!-- SIZE -->
  <span class="text-uppercase">Size :</span>

   {% csrf_token %}

  <select name="size" class='form-control' id="size">
     {% for variation in sizes %}
          <option data-variation-id-1='{{variation.size}}' >
                      {{ variation.size.name }}
          </option>
                                                    
      {% endfor %}
                                                
   </select>
<br/>
<!-- COLOR -->

<span class="text-uppercase">Color :</span>

<div id="buttons">
 {% for variation in colors %}
 <!-- this controls how the price, images, and all attributes of the variations change through JQuery-->
   <input type="radio" class="radio_color"  name='item' id="variantid" data-img-list='{{variation.get_image_url}}' data-variation-id-2='{{variation.size}}' data-sale-price="{{ variation.sale_price }}" data-price="{{ variation.price }}" value="{{ variation.id }}" 
data-color-hex="{{variation.color.code}}"/>
                                                            
{{ variation.color }}
                                                    
{% endfor %}
                                
</div>

我的 JS 是：

function setPrice(input){
    var price = $(input).attr("data-price")
    $("#price").html("<h3> $" + price  + "</h3>");

}
setPrice("input[type='radio']");

//on change
$('input[type=radio]').change(function(){

    setPrice($(this));
});

如何使我的颜色（单选按钮）取决于（show/hide）在下拉列表中选择的尺寸？

我要使用的变量是 data-variation-id-1 和 data-variation-id-2 用于单选按钮的大小（例如红色 - 16Gb）

Answer 1

您也可以为 select 编写更改事件。在此获取 selected 选项的 attr 值并使用该 show/hide 您的元素。所以，只需在你的 for 循环中添加外部 div :

{% for variation in colors %}
<div>
  //your radio button
</div>                                                 
{% endfor %}

演示代码 :

function setPrice(input) {
  var price = $(input).attr("data-price")
  $("#price").html("<h3> $" + price + "</h3>");

}
setPrice("input[type='radio']");

$('input[type=radio]').change(function() {
  setPrice($(this));
});
//on change of select
$("select[name=size]").change(function() {
  var attr_size = $(this).find("option:selected").data("variation-id-1") //get attr value
  //hide all div inside buttons
  $("#buttons div").hide()
  //show only divs where match found
  $("#buttons input[data-variation-id-2=" + attr_size + "]").closest('div').show()

});
$("select[name=size]").trigger('change')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id='add-form' method='POST' action="{% url 'cart' %}">

  <h3 id='price'>{{ object.variation_set.first.price }}</h3>

  <br/>
  <!-- SIZE -->
  <span class="text-uppercase">Size :</span>

  <select name="size" class='form-control' id="size">
    <option data-variation-id-1='16'>
      16 gb
    </option>
    <option data-variation-id-1='32'>
      32 gb
    </option>

  </select>
  <br/>
  <!-- COLOR -->

  <span class="text-uppercase">Color :</span>

  <div id="buttons">
    <!--just add some outer div -->
    <div>
      <input type="radio" class="radio_color" name='item' id="variantid" data-img-list='{{variation.get_image_url}}' data-variation-id-2='16' data-sale-price="123" data-price="12" value="1" data-color-hex="123" /> Red
    </div>
    <div>
      <input type="radio" class="radio_color" name='item' id="variantid" data-img-list='{{variation.get_image_url}}' data-variation-id-2='16' data-sale-price="{{ variation.sale_price }}" data-price="123" value="{{ variation.id }}" data-color-hex="{{variation.color.code}}"
      /> Blue
    </div>
    <div>
      <input type="radio" class="radio_color" name='item' id="variantid" data-img-list='{{variation.get_image_url}}' data-variation-id-2='32' data-sale-price="{{ variation.sale_price }}" data-price="44" value="{{ variation.id }}" data-color-hex="{{variation.color.code}}"
      /> Red

    </div>
  </div>

Django 大小（下拉菜单）和颜色（单选按钮）随着单选按钮数据 JQuery 的变化 prices/images

Django Size (Dropdown) and Color (Radio Buttons) with changing prices/images dependant of radio button data JQuery

html

django

jquery

radio-button

dropdown