欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

組合框選擇2視圖不& # 39；無法正常查看

CSS
錢斌斌2年前8瀏覽0評論

在我的web應用程序中，我從JavaScript向表中添加新行。

行中有一個元素，我正在從ViewBag加載數據。

此外，我想在同一個元素中添加Select2類。

這是我當前的代碼。

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.6.4.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<div class="table-responsive text-nowrap">
  <table class="table table-striped" id="submissionTable">
    <thead>
      <tr>
        <th>#</th>
        <th>ITEM</th>
        <th>QTY</th>
        <th>MEASURE BY</th>
        <th>UNIT PRICE</th>
        <th>LINE TOTAL</th>
      </tr>
    </thead>
    <tbody class="table-border-bottom-0">
      <tr id="tablerow0"></tr>
    </tbody>
  </table>
  <p>
    <button id="add" type="button" class="btn btn-primary">Add</button>
  </p>
</div>

這是javascript

var counter = 1;

var dropdownOptions = @Html.Raw(Json.Encode(ViewBag.Item_ID));

$(function () {
  $("#add").click(function () {
    var newRow = $(
       '<tr id="tablerow' +
       counter +
       '" class ="poSet"> ' +
       "<td>" +
       '<label id="CountItems"><strong>' +
       counter +
       "</strong></label>" +
       "</td>" +
       '<td width="40%">' +
       '<select onchange="sendInfo(this)" class="form-select ItemId" data-id= ' + counter + ' name="Item_Id[' +
       counter +
       ']" id="ItemId[' + counter + ']" required="required" ' +
       "</select>" +
       "</td>" +
       '<td width="10%">' +
       '<input type="text" class="form-control Qty" name="Qty[' +
       counter +
       ']" value="1" id="Qty[' + counter + ']" onchange="calQtyBase(this)" data-QtyId= ' + counter + ' required="required" />' +
       "</td>" +
       '<td width="10%">' +
       '<input type="text" class="form-control" name="MeasureBy[' +
       counter +
       ']" value="" id="MeasureBy[' + counter + ']" readonly />' +
       "</td>" +
       '<td width="20%">' +
       '<input type="text" class="form-control UnitPrice" name="Unit_Price[' +
       counter +
       ']" value="0.00" id="UnitPrice[' + counter + ']"  onchange="priceBase(this)" data-PriceId= ' + counter + '  required="required" />' +
       "</td>" +
       '<td width="20%">' +
       '<input type="text" class="form-control LineTotal" name="Line_Total[' +
       counter +
       ']" value="0.00" id="LineTotal[' + counter + ']"    required="required" />' +
       "</td>" +
       "<td>" +
       '<button type="button" class="btn btn-danger" onclick="removeTr(' +
       counter +
       ');">x</button>' +
       "</td>" +
       "</tr>"
     );
    
    var selectElement = newRow.find("select"); 

    dropdownOptions.forEach(function (option) {
      var optionElement = $("<option>").val(option.Value).text(option.Text);
      selectElement.append(optionElement);
    });

    newRow.appendTo("#submissionTable");

    selectElement.select2();

    counter++;
    return false;
  });
});

所以當我添加這個的時候，視圖是這樣的

enter image description here

當我第一次添加數據元素時，寬度是默認的，然后開始改變。

在選擇2組合框的視圖中也有一個問題。我認為缺少了一個表單控件類之類的東西，它看起來就像一個沒有CSS的組合框。

我如何修理這些？

要讓select2下拉列表填滿可用寬度，最簡單的方法是將width:100%添加到select2參數中:

selectElement.select2({width:"100%"});

還有其他選項，如設置style=，但我認為上面的選項是最簡單和最一致的。

如果你的選擇2看起來像一個普通的選擇，那么它可能是一個普通的選擇，還沒有應用選擇2-或者，css可能沒有正確加載(如錯誤/阻塞的路徑)-或者可能有沖突的css，如果你有另一個css庫(如bootstrap)，所以你可能需要額外的css調整/插件；根據具體的問題，它應該做一些事情。

請注意，如果您的選擇在某種對話框中，select2需要額外的參數(它影響下拉菜單本身，這似乎不是您的問題，只是注意到它)

在下面的代碼片段中，它正常工作。

更新的片段:

var counter = 1;

var dropdownOptions = [{ Value:'1', Text:'one' }, { Value:'2', Text:'two' }];

$(function () {
  $("#add").click(function () {
    var newRow = $(
       '<tr id="tablerow' +
       counter +
       '" class ="poSet"> ' +
       "<td>" +
       '<label id="CountItems"><strong>' +
       counter +
       "</strong></label>" +
       "</td>" +
       '<td width="40%">' +
       '<select onchange="sendInfo(this)" class="form-select ItemId" data-id= ' + counter + ' name="Item_Id[' +
       counter +
       ']" id="ItemId[' + counter + ']" required="required" ' +
       "</select>" +
       "</td>" +
       '<td width="10%">' +
       '<input type="text" class="form-control Qty" name="Qty[' +
       counter +
       ']" value="1" id="Qty[' + counter + ']" onchange="calQtyBase(this)" data-QtyId= ' + counter + ' required="required" />' +
       "</td>" +
       '<td width="10%">' +
       '<input type="text" class="form-control" name="MeasureBy[' +
       counter +
       ']" value="" id="MeasureBy[' + counter + ']" readonly />' +
       "</td>" +
       '<td width="20%">' +
       '<input type="text" class="form-control UnitPrice" name="Unit_Price[' +
       counter +
       ']" value="0.00" id="UnitPrice[' + counter + ']"  onchange="priceBase(this)" data-PriceId= ' + counter + '  required="required" />' +
       "</td>" +
       '<td width="20%">' +
       '<input type="text" class="form-control LineTotal" name="Line_Total[' +
       counter +
       ']" value="0.00" id="LineTotal[' + counter + ']"    required="required" />' +
       "</td>" +
       "<td>" +
       '<button type="button" class="btn btn-danger" onclick="removeTr(' +
       counter +
       ');">x</button>' +
       "</td>" +
       "</tr>"
     );
    
    var selectElement = newRow.find("select"); 

    dropdownOptions.forEach(function (option) {
      var optionElement = $("<option>").val(option.Value).text(option.Text);
      selectElement.append(optionElement);
    });

    newRow.appendTo("#submissionTable");

    selectElement.select2({width:"100%"});

    counter++;
    return false;
  });
});

<link  rel="stylesheet" />
<script src="http://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>


<div class="table-responsive text-nowrap">
  <table class="table table-striped" id="submissionTable">
    <thead>
      <tr>
        <th>#</th>
        <th>ITEM</th>
        <th>QTY</th>
        <th>MEASURE BY</th>
        <th>UNIT PRICE</th>
        <th>LINE TOTAL</th>
      </tr>
    </thead>
    <tbody class="table-border-bottom-0">
      <tr id="tablerow0"></tr>
    </tbody>
  </table>
  <p>
    <button id="add" type="button" class="btn btn-primary">Add</button>
  </p>
</div>