基於值JS檢查多選參數的文本框值
[英]Textbox value to check multiselect parameter based on values JS
問題描述
嘗試為復選框分配刻度並在值與文本框中的值匹配時選擇選項。 這是一個多選參數。
例如，如果在頁面刷新時文本框包含 1,2，我想確保選中 Cheese 和 Tomatoes。 如果文本框包含 1,5,6，那么我想確保選擇了 Cheese、Pepperoni 和 Onions。 如果文本框包含 1、2、3、4、5、6，那么我想確保選中所有復選框。
試圖編寫一些 javascript 來做到這一點。 我嘗試使用本地存儲，但無法正常工作。 查看代碼示例： https : //www.codeply.com/go/rupzwTzBMY
ASPX：
<input type="text" runat="server" id="txt1" visible="true" value="" />
<div class="container">
<select id="basic" multiple="multiple">
<option value="1">Cheese</option>
<option value="2">Tomatoes</option>
<option value="3">Mozzarella</option>
<option value="4">Mushrooms</option>
<option value="5">Pepperoni</option>
<option value="6">Onions</option>
</select>
</div>
當前，當頁面刷新時，即使文本框已分配值 - 復選框清除並且未選擇任何內容。 我試圖確保用戶在頁面刷新時從多參數中選擇項目時，這些值不會消失並仍然保留在頁面上。
到目前為止有效的 Javascript 功能。 當您從下拉列表中選擇項目時，這會將值放入文本框中。 但是，當頁面刷新時，文本框會保留這些選定的值，但多選參數不會：
$('#basic').multiselect({
onChange: function () {
var selectedOptions = $('#basic').val();
document.getElementById("txt1").value = selectedOptions;
},
});
3 個解決方案
解決方案1
1 已采納 2018-09-28 09:18:48
首先，您必須在填充默認值后重新加載一次選擇，如下所示
$('#basic').multiselect('refresh')
其次，嘗試使用這里描述的onInitialized方法
最后，您嘗試將TextBox值分配回Dropdown ，如下所示，您嘗試使用逗號1,2分配該值，該值實際上並不作為dropdown的值存在。
$('#basic').children("option[value=" +
document.getElementById("txt1").value + "]").prop("selected", true);
將值拆分為1和2 ，然后分配，它就可以工作了。
$(document).ready(function () { document.getElementById("txt1").value = "1,2,3" $('#basic').multiselect({ includeSelectAllOption: true, numberDisplayed: 5, onInitialized: function(select, container) { console.log("Init"); selectListValues(); } }); $("#basic").multiselect('refresh'); }); function selectListValues() { var txtValue = document.getElementById("txt1").value; var selectedValues = txtValue.split(","); for(var i = 0; i < selectedValues.length; i++) { var val = selectedValues[i]; if (val == null || val == "") continue; $('#basic').children("option[value=" + val + "]").prop("selected", "selected"); } }
<html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script> </head> <body> <input type="text" runat="server" id="txt1" visible="true" value="" onchange="selectListValues()" /> <div class="container"> <select id="basic" multiple="multiple"> <option value="1">Cheese</option> <option value="2">Tomatoes</option> <option value="3">Mozzarella</option> <option value="4">Mushrooms</option> <option value="5">Pepperoni</option> <option value="6">Onions</option> </select> </div> </body> </html>
解決方案2
0 2018-09-28 09:33:13
您可以將輸入值存儲在本地存儲中，然后從本地存儲中獲取輸入值，然后迭代選項集，如果本地存儲中存在值，則將 selected 屬性設置為選項的 true。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<input type="text" runat="server" id="txt1" visible="true" value="" />
<div class="container">
<select id="basic" multiple>
<option value="1">Cheese</option>
<option value="2">Tomatoes</option>
<option value="3">Mozzarella</option>
<option value="4">Mushrooms</option>
<option value="5">Pepperoni</option>
<option value="6">Onions</option>
</select>
</div>
<script>
$(document).ready(function () {
$('#basic').multiselect({
onChange: function () {
var selectedOptions = $('#basic').val();
console.log(selectedOptions);
setInputAndLocatStorage();
}
});
function onLoad() {
if(!localStorage.getItem('selectedItems')) return false;
var selItems = localStorage.getItem('selectedItems').split(',');
document.getElementById('txt1').value = selItems.join(',');
$('#basic').multiselect('select',selItems);
}
function setInputAndLocatStorage() {
var selItems = $('#basic').val();
var val = selItems == null ? '': selItems.join(',');
document.getElementById('txt1').value = val;
localStorage.setItem('selectedItems', val);
}
onLoad();
});
</script>
解決方案3
0 2018-09-28 09:33:34
您可以使用本地存儲獲取和填充值並拆分項目。
注意我必須注釋掉本地存儲，以便演示代碼可以工作，因為本地存儲不能跨域工作。 您需要在本地對此進行測試。
$(function() { //$("#txt1").val(localStorage.getItem('topping')); var str = $("#txt1").val().split(","); $('#basic').val(str); $('#basic').on('change', function(){ var list = $("#txt1").val($(this).val()); //localStorage.setItem('topping', list); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" runat="server" id="txt1" visible="true" value="1,2,4" /> <select id="basic" multiple="multiple"> <option value="1">Cheese</option> <option value="2">Tomatoes</option> <option value="3">Mozzarella</option> <option value="4">Mushrooms</option> <option value="5">Pepperoni</option> <option value="6">Onions</option> </select>
根據文本框值選中或取消選中復選框Adobe Acrobat Stamp Javascript
[英]Check or Uncheck Checkbox based on Textbox value Adobe Acrobat Stamp Javascript
Alpine JS 根據 select 選項更改 label / 文本框值
[英]Alpine JS change label / textbox value based on select option
如何基於文本框的值動態更改選擇框的值
[英]how to dynamically change the values of select box based on the value of textbox
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.