Question

我要添加或删除特定的div：

这是div

<div class="quantity form-group col-md-3">
  <label for="dept">Quantity:</label>
  <input class="form-control" type="number">
</div>

基于以下选择标记中的特定选择：

<div id="selection" class="form-group ">
<label for="sel1">Select Items:</label>
  <select name="assets" class="asset-selection form-control" multiple="multiple">
    <option value="asset1">Asset 1</option>
    <option value="asset2">Asset 2</option>
    <option value="asset3">Asset 3</option>
    <option value="asset4">Asset 4</option>
    <option value="asset5">Asset 5</option>
  </select>

我当前正在使用select2，这是脚本标签：

<script>
$(document).ready(function() {
$('.asset-selection').select2({
  maximumSelectionLength: 5
});

$('.asset-selection').change(function(){
 //I'm not sure what to add here
}

 })

});

</script>

现在假设从asset1中选择了.asset-selection，我希望显示具有增量ID的.quantity div。

Answer 1

检查单个/多个并查看结果。

$(document).ready(function() {
	// The next line is in comment to make this code run, uncomment it in your code that include the matching library.
  //$('.asset-selection').select2({maximumSelectionLength: 5});
  function hide_all_elements() {
  	$(".asset").hide();
  }
  $('.asset-selection').change(function(){
  	let className = $('.asset-selection').val();
    $.each(className, function (i, v) {
    	className[i] = "." + v;
    });
    hide_all_elements();
    $(className.join(",")).show();
  });
  
  hide_all_elements();
});

<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>

<div class="asset asset1 form-group col-md-3">
  <label for="dept">AAA:</label>
  <input class="form-control" type="number">
</div>

<div class="asset asset2 form-group col-md-3">
  <label for="dept">BBB:</label>
  <input class="form-control" type="number">
</div>

<div class="asset asset3 form-group col-md-3">
  <label for="dept">CCC:</label>
  <input class="form-control" type="number">
</div>

<div class="asset asset4 form-group col-md-3">
  <label for="dept">DDD:</label>
  <input class="form-control" type="number">
</div>

<div class="asset asset5 form-group col-md-3">
  <label for="dept">EEE:</label>
  <input class="form-control" type="number">
</div>

<div id="selection" class="form-group ">
<label for="sel1">Select Items:</label>
  <select name="assets" class="asset-selection form-control" multiple="multiple">
    <option value="asset1">AAA</option>
    <option value="asset2">BBB</option>
    <option value="asset3">CCC</option>
    <option value="asset4">DDD</option>
    <option value="asset5">EEE</option>
  </select>

Answer 2

这里是用于根据资产select2的选择动态创建和删除具有唯一名称的div的代码。

<div class="append_elements">

    </div>
 <div id="selection" class="form-group ">
      <label for="sel1">Select Items:</label>
        <select name="assets" id="assets" class="asset-selection form-control" multiple="multiple">
          <option value="asset1">Asset 1</option>
          <option value="asset2">Asset 2</option>
          <option value="asset3">Asset 3</option>
          <option value="asset4">Asset 4</option>
          <option value="asset5">Asset 5</option>
        </select>
        </div>
<script>
$(document).ready(function() {

$("#assets").select2();
  $('#assets').change(function(){
    array = $('#assets').val();
    if(array.length > 0){
        $(".append_elements").html('');
        array.forEach(function(key,entry) {
            var name = 'quantity_'+key;
           $(".append_elements").append('<div class="'+name+' form-group col-md-3"><label for="'+name+'">Quantity '+key+':</label><input class="form-control" type="number" name="'+name+'" id="'+name+'"></div>');
        });

    }
    else{
        $(".append_elements").html('');
    }

  });

});

</script>

Answer 3

如果我对您的理解正确，则可能有效。代码有点时髦，但是可以根据自己的喜好进行调整。您可能想找到另一种方法来确定单击了哪个选项，以及另一种“递增？”的方法。 ID属性。

请注意remove()和insertAfter()方法，因为您的问题询问了如何添加或删除DOM元素。

$(document).ready(function() {
    let dynamicDiv = '<div class="quantity form-group col-md-3"><label for="dept">Quantity:</label><input class="form-control" type="number"></div>';
/*
    $('.asset-selection').select2({
        maximumSelectionLength: 5
    });
*/
    $('option').on('click',function(e){
        let currentOption = $(e.target).val();
        $('.quantity').remove();
        $(dynamicDiv).insertAfter('#selection');
        $('.quantity').attr('id',currentOption);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selection" class="form-group ">
    <label for="sel1">Select Items:</label>
    <select name="assets" class="asset-selection form-control" multiple="multiple">
        <option value="asset1">Asset 1</option>
        <option value="asset2">Asset 2</option>
        <option value="asset3">Asset 3</option>
        <option value="asset4">Asset 4</option>
        <option value="asset5">Asset 5</option>
    </select>

Answer 4

使用一些select2东西，并且重要的是使用带有值的'data'属性，您可以通过创建带有数量值的类来添加和归档这些值（我在这里假设一个整数数据“ amount”，它实际上只是一个占位符）

我把它弄得很冗长，所以您可以看到发生了什么，可以将其压缩。

$(document).ready(function() {
  $('.asset-selection').select2({
    maximumSelectionLength: 5
  });

  $('.asset-selection').on('select2:select', function(e) {

    var data = e.params.data;
    //console.log(data);
    let ma = $('#myassets');
    let sel = $(e.params.data.element);
    let ndiv = $('<div class="quantity form-group col-md-3"></div>');
    let nlabel = $('<label for="dept">Quantity:</label>');
    let ninput = $('<input class="form-control" type="number"/>');
    let amt = sel.data('amount') * 1;
    ninput.val(amt);
    ndiv.addClass('asset-number-' + amt);
    ndiv.append(nlabel);
    ndiv.append(ninput);
    ndiv.appendTo(ma);
    //console.log(amt);
  }).on('select2:unselect', function(e) {
    let ma = $('#myassets');
    let sel = $(e.params.data.element);
    let amt = sel.data('amount') * 1
    let removeme = ma.find('.asset-number-' + amt);
    removeme.remove();
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>

<div id="selection" class="form-group ">
  <label for="sel1">Select Items:</label>
  <select name="assets" class="asset-selection form-control" multiple="multiple">
    <option value="asset1" data-amount="1">Asset 1</option>
    <option value="asset2" data-amount="2">Asset 2</option>
    <option value="asset3" data-amount="3">Asset 3</option>
    <option value="asset4" data-amount="4">Asset 4</option>
    <option value="asset5" data-amount="5">Asset 5</option>
  </select>
</div>
<div id="myassets" class="container"></div>

根据多项选择中的选择添加/删除div

4 个答案: