我正在使用forEach回圈從資料中創建動態bootstrap list-groups。在創建的動態數量的串列組內持有一些選擇元素。我為每個選擇元素設定了一個變化監聽器，它將選擇的第一個值復制到其他串列組的所有其他選擇元素。然后我用.off()洗掉了on change listener，這樣用戶就可以改變任何一個選擇元素的值，如果他們不希望它的值與第一個選擇的值相同。我想把選擇元素的值放在一個按鈕的資料屬性中，以便以后用于Ajax呼叫。我的問題是，如果我試圖改變其中一個選擇元素的值，并將其放入資料屬性中，那么資料屬性的值仍然采用被選中的第一個值，而不是新的值。
這是我的HTML輸出的一個例子。在這個例子中，我關注的是串列組中類別為 "原因 "的中間元素，以及每個串列組底部類別為 "提交 "的按鈕。如果我想把串列組4的值改為3而不是1，我也希望提交按鈕上的 "data-reason "的資料屬性改為3。然而，每當我改變數值時，資料屬性并沒有從第一個選定的數值開始改變。
<div class="row">
<div class="col-md-4"/span>>
**//list-group 1**
<ol class="list-group list-group-numbered mb-4"> **/list-group 1**
<li class="list-group-item d-flex justify-content-between align-items-start" >
<div class="ms-2 me-auto"/span>>
<div class="fw-old"> 替換</div>>
<p>0 => 4910</p>/span>
</div>/span>
<span class="badge bg-primary rounded-pill"/span>> 2020-05-24</span>
</li>/span>
<li class="list-group-item d-flex justify-content-between align-items-start" >
<div class="ms-2 me-auto"/span>>
<div class="fw-old"> Steward</div>。
<select class="form-select steward"/span>>
< option disabled="" selected="">/span>選擇。 ...</option>。
<option>Grace Hsieh</option>
<option>/span>Matt Stevens</option>/span>
<option>Meagan Jones</option>
</select>/span>
</div>/span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start" >
<div class="ms-2 me-auto"/span>>
<div class="fw-bold"/span>> 原因</div>
< select class="form-select reason" id="4910">
< option disabled="" selected="">/span> 選擇。 ...</option>。
<option value="1"/span>> One</option>。
<option value="2"/span>> Two</option>。
<option value="3"/span>> Three</option>
</select>/span>
</div>/span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start" >
<div class="ms-2 me-auto"/span>>
<div class="fw-bold"/span>> 注釋</div>>
< textarea class="notes" rows="4"/span> cols="45"/span>> </textarea>>
<hr>/span>
<div class="text-end">
< button data-replacement="4910"/span> data-date="2020-05-24"/span> 型別="按鈕" class="btn btn-success submit" data-reason="1"/span>> 提交</按鈕>
</div>/span>
</div>/span>
</li>
</ol>/span>
</div>/span>
<div class="col-md-4"/span>>
**//list-group 2**
<ol style="border-color: red" class="list-group list-group-numbered mb-4">
<li class="list-group-item d-flex justify-content-between align-items-start" >
<div class="ms-2 me-auto"/span>>
<div class="fw-old"> 替換</div>>
<p>0 => 9183</p>/span>
</div>/span>
<span class="badge bg-primary rounded-pill"/span>> 2020-05-25</span>
</li>/span>
<li class="list-group-item d-flex justify-content-between align-items-start" >
<div class="ms-2 me-auto"/span>>
<div class="fw-old"> Steward</div>。
<select class="form-select steward"/span>>
< option disabled="" selected="">/span>選擇。 ...</option>。
<option>Grace Hsieh</option>
<option>/span>Matt Stevens</option>/span>
<option>Meagan Jones</option>
</select>/span>
</div>/span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start" >
<div class="ms-2 me-auto"/span>>
<div class="fw-bold"/span>> 原因</div>
< select class="form-select reason" id="9183">/span>
< option disabled="" selected="">/span>選擇。 ...</option>。
<option value="1"/span>> One</option>。
<option value="2"/span>> Two</option>。
<option value="3"/span>> Three</option>
</select>/span>
</div>/span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start" >
<div class="ms-2 me-auto"/span>>
<div class="fw-bold"/span>> 注釋</div>>
< textarea class="notes" rows="4"/span> cols="45"/span>> </textarea>>
<hr>/span>
<div class="text-end">
< button data-replacement="9183"/span> data-date="2020-05-25"/span> 型別="按鈕" class="btn btn-success submit" data-reason="1"/span>> 提交</按鈕>
</div>/span>
</div>/span>
</li>
</ol>/span>
</div>/span>
<div class="col-md-4"/span>>
**//list-group 3**
<ol style="border-color: red" class="list-group list-group-numbered mb-4">
<li class="list-group-item d-flex justify-content-between align-items-start" >
<div class="ms-2 me-auto"/span>>
<div class="fw-old"> 替換</div>>
<p>0 => 7474</p>/span>
</div>/span>
<span class="badge bg-primary rounded-pill"/span>> 2020-05-26</span>
</li>/span>
<li class="list-group-item d-flex justify-content-between align-items-start" >
<div class="ms-2 me-auto"/span>>
<div class="fw-old"> Steward</div>。
<select class="form-select steward"/span>>
< option disabled="" selected="">/span>選擇。 ...</option>。
<option>Grace Hsieh</option>
<option>/span>Matt Stevens</option>/span>
<option>Meagan Jones</option>
</select>/span>
</div>/span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start" >
<div class="ms-2 me-auto"/span>>
<div class="fw-bold"/span>> 原因</div>
< select class="form-select reason" id="7474">/span>
< option disabled="" selected="">/span> 選擇。 ...</option>。
<option value="1"/span>> One</option>。
<option value="2"/span>> Two</option>。
<option value="3"/span>> Three</option>
</select>/span>
</div>/span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start" >
<div class="ms-2 me-auto"/span>>
<div class="fw-bold"/span>> 注釋</div>>
< textarea class="notes" rows="4"/span> cols="45"/span>> </textarea>>
<hr>/span>
<div class="text-end">
< button data-replacement="7474"/span> data-date="2020-05-26"/span> 型別="按鈕" class="btn btn-success submit" data-reason="1"/span>> 提交</按鈕>
</div>/span>
</div>/span>
</li>
</ol>/span>
</div>/span>
<div class="col-md-4"/span>>
**//list-group 4**
<ol style="border-color: red" class="list-group list-group-numbered mb-4">
<li class="list-group-item d-flex justify-content-between align-items-start" >
<div class="ms-2 me-auto"/span>>
<div class="fw-old"> 替換</div>>
<p>0 => 8186</p>/span>
</div>/span>
<span class="badge bg-primary rounded-pill"/span>> 2020-05-27</span>
</li>/span>
<li class="list-group-item d-flex justify-content-between align-items-start" >
<div class="ms-2 me-auto"/span>>
<div class="fw-old"> Steward</div>。
<select class="form-select steward"/span>>
< option disabled="" selected="">/span>選擇。 ...</option>。
<option>Grace Hsieh</option>
<option>/span>Matt Stevens</option>/span>
<option>Meagan Jones</option>
</select>/span>
</div>/span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start" >
<div class="ms-2 me-auto"/span>>
<div class="fw-bold"/span>> 原因</div>
< select class="form-select reason" id="8186">
< option disabled="" selected="">/span>選擇。 ...</option>。
<option value="1"/span>> One</option>。
<option value="2"/span>> Two</option>。
<option value="3"/span>> Three</option>
</select>/span>
</div>/span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start" >
<div class="ms-2 me-auto"/span>>
<div class="fw-bold"/span>> 注釋</div>>
< textarea class="notes" rows="4"/span> cols="45"/span>> </textarea>>
<hr>/span>
<div class="text-end">
< button data-replacement="8186"/span> data-date="2020-05-27"/span> 型別="按鈕" class="btn btn-success submit" data-reason="1"/span>> 提交</按鈕>
</div>/span>
</div>/span>
</li>
</ol>/span>
</div>/span>
</div>/span>
這是一個關于變化的函式。我試圖通過抓取id來獲得每個單獨的select元素的值，然后用id值來設定.submit元素的資料屬性。這并不奏效，因為資料屬性仍然被設定為第一個被選中的值。如果有任何關于如何實作這一目標的建議，我們將不勝感激！
$('.reason') 。 on('change', function () {
let x = $（this）.val()
let id = $（this）.attr('id')
$('.reason').each(function () {
$(this).val(x)
$(this).off('change')
$('.submit').attr('data-reason', $('#' id) 。 val())
})
})
如果有幫助的話，我是這樣創建串列組的
我是這樣創建串列組的
let replaceData = $table2.bootstrapTable('getSelections')
console.log(replaceData)
replaceData.forEach(function (item, i) {
如果（i == 0） {
content = '<div class="row"> /span>'
}
content = `<div class="col-md-4"> '
<ol class="list-group list-group-numbered mb-4">
<li class="list-group-item d-flex justify-content-between align-items-start" >
<div class="ms-2 me-auto"/span>>
<div class="fw-old"> 替換</div>>
<p>${item.Meter} => ${item.Expected}</p>/span>
</div>/span>
<span class="badge bg-primary rounded-pill"/span>>${item. Date}</span>${item.
</li>。
<li class="list-group-item d-flex justify-content-between align-items-start" >
<div class="ms-2 me-auto"/span>>
<div class="fw-old"> Steward</div>。
<select class="form-select steward"/span>>
<option disabled selected>/span>選擇。 .</option>選擇。
<option>Grace Hsieh</option>
<option>/span>Matt Stevens</option>/span>
<option>Meagan Jones</option>
</select>/span>
</div>/span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start" >
<div class="ms-2 me-auto"/span>>
<div class="fw-bold"/span>> 原因</div>
<select class="form-select reason" id=${item. 預期}>
<option disabled selected>/span>選擇。 .</option>選擇。
<option value="1"/span>> One</option>。
<option value="2"/span>> Two</option>。
<option value="3"/span>> Three</option>
</select>/span>
</div>/span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start" >
<div class="ms-2 me-auto"/span>>
<div class="fw-bold"/span>> 注釋</div>>
< textarea class='note' rows="4"/span> cols="45"/span>> </textarea>>
<hr>/span>
<div class="text-end">
<button data-replacement=${item. Expected} data-date=${item. Date} type="button" class="btn btn-success submit"> 提交</按鈕>
</div>/span>
</div>/span>
</li>
</ol>/span>
</div>`.
如果（i != 0 && i % 5 == 0） {
content = '</div>< div class="row"> '
}
})
content = '</div> '
container.append(content)
uj5u.com熱心網友回復：
由于你用off洗掉了變化監聽器，data-reason當然只會在第一次變化時被設定。你可以保留變化監聽器，并在第一次變化后為所有相關的選擇元素設定一個屬性。之后，檢查是否是第一次更改或之后的任何更改。
所以你可以這樣做來實作你想要的東西（我希望我的問題是正確的）：
$('.reason') 。 on('change', function () {
let x = $(this).val() 。
let id = $(this).attr('id') 。
if(!$(this) 。 attr('was-changed')){ //check if this select field was already changed.
$('.reason').each(function () {
$(this).val（x）。
$(this)。 attr('was-changed', true); //設定was-changed在第一次變化時為true。
});
$('.submit').attr('data-reason', $('#' id) 。 val()); //改變所有提交資料的原因。
}
//如果它不是第一次改變，只需改變屬于<ol>元素的提交。
else {
$(this).closest('ol').find(' 。 submit').attr('data-reason', $('#' id).val()。
}
});
作業中的小插曲。https://jsfiddle.net/uoavkhqe/14/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/331820.html
標籤：