Question

我的代码出了什么问题？我有category_id，其中1表示鞋码，2表示服装尺码。它仅显示category_id(1)的val，而category_id(2)仅显示“大”。感谢。

<select class="sm-form-control" name="product_size" id="product_size">
  <option value="">Size</option>
</select>

function modal_product_extension(id, category_id) {
    $('#addSize').modal('show');
    $('#addSize').find($('#product_id')).val(id);
    $('#addSize').find($('#categories_id')).val(category_id);
    $('#addSize').find($('#product_price')).val('0');
    $('#addSize').find($('#product_stocks')).val('0');

    var $productSize = $("#product_size")
    if (category_id == "1") {
        var i;
        $productSize.empty()
        for (i = 3; i <= 15; i++) {
            val = i;
            $productSize.append("<option value='"+val+"'>"+ val +"</option>");
        }
    } else if (category_id == "2") {
        $productSize.empty()
        $productSize.append("<option value='S'>Small</option>");
        $productSize.append("<option value='M'>Medium</option>");
        $productSize.append("<option value='L'>Large</option>");
    } else if (category_id == "0") {
        $productSize.empty()
        $productSize.append("<option value=''>Size</option>");
    }
}

Answer 1

如果我理解正确，您希望根据类别ID向select元素添加多个选项。现在你正在改变select元素的html，而不是向它添加选项。

在下面的代码段中，我已将html替换为append，因此它实际上会添加选项而不是替换它。一个例子是category_id = 2。

＆＃13;

function modal_product_extension(id, category_id) {

  $('#addSize').find($('#product_id')).val(id);
  $('#addSize').find($('#category_id')).val(category_id);
  $('#addSize').find($('#product_price')).val('0');
  $('#addSize').find($('#product_stocks')).val('0');

  if (category_id == "1") {
    var i;
    for (i = 3; i <= 15; i++) {
      val = i;
      $("#product_size").append("<option value='val'>" + val + "</option>");
    }
  } else if (category_id == "2") {
    $("#product_size").append("<option value='S'>Small</option>");
    $("#product_size").append("<option value='M'>Medium</option>");
    $("#product_size").append("<option value='L'>Large</option>");
  } else if (category_id == "0") {
    $("#product_size").append("<option value=''>Size</option>");
  }
}

modal_product_extension(1, 1);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="sm-form-control" name="product_size" id="product_size">
</select>

＆＃13;

Answer 2

问题是因为html() 删除当前内容并覆盖它。因此，您只会看到您设置的最后一个内容。

要解决此问题，请在第一个条件中使用append()和empty()，在第二个条件中使用单个html()调用。另请注意，您还需要在第一个条件中设置的HTML中连接val变量。试试这个：

function modal_product_extension(id, category_id) {
  var $addSize = $('#addSize').modal('show');
  $addSize.find('#product_id').val(id);
  $addSize.find('#category_id').val(category_id);
  $addSize.find('#product_price').val('0');
  $addSize.find('#product_stocks').val('0');

  var $productSize = $("#product_size")
  if (category_id == "1") {
    $productSize.empty()
    for (var i = 3; i <= 15; i++) {
      $productSize.append('<option value="' + val + '">' + val + '</option>');
    }
  } else if (category_id == "2") {
    $productSize.html('<option value="S">Small</option><option value="M">Medium</option><option value="L">Large</option>');
  } else if (categories_id == "0") {
    $productSize.html('<option value="">Size</option>');
  }
}

基于category_id的循环大小

2 个答案: