html-select 相关问题

一个HTML用户界面元素，用于从有限的选项集合中选择一个或多个选项。

我有一个具有 multiple 属性的元素。如何使用 JavaScript 获取此元素的选定值？这就是我正在尝试的：函数循环选择（）{ 变种我有一个带有 <select> 属性的 multiple 元素。如何使用 JavaScript 获取此元素的选定值？这就是我正在尝试的： function loopSelected() { var txtSelectedValuesObj = document.getElementById('txtSelectedValues'); var selectedArray = new Array(); var selObj = document.getElementById('slct'); var i; var count = 0; for (i=0; i<selObj.options.length; i++) { if (selObj.options[i].selected) { selectedArray[count] = selObj.options[i].value; count++; } } txtSelectedValuesObj.value = selectedArray; } 没有 jQuery： // Return an array of the selected option values in the control. // Select is an HTML select element. function getSelectValues(select) { var result = []; var options = select && select.options; var opt; for (var i=0, iLen=options.length; i<iLen; i++) { opt = options[i]; if (opt.selected) { result.push(opt.value || opt.text); } } return result; } 简单示例： <select multiple> <option>opt 1 text <option value="opt 2 value">opt 2 text </select> <button onclick=" var el = document.getElementsByTagName('select')[0]; alert(getSelectValues(el)); ">Show selected values</button> 使用 jQuery，通常的方式： var values = $('#select-meal-type').val(); 来自文档：对于 <select multiple="multiple"> 元素，.val() 方法返回一个包含每个选定选项的数组；实际上，我发现使用纯 JavaScript 的最好、最简洁、最快、最兼容的方式（假设你不需要完全支持 IE lte 8）如下： var values = Array.prototype.slice.call(document.querySelectorAll('#select-meal-type option:checked'),0).map(function(v,i,a) { return v.value; }); 更新（2017-02-14）：使用 ES6/ES2015 的更简洁的方法（对于支持它的浏览器）： const selected = document.querySelectorAll('#select-meal-type option:checked'); const values = Array.from(selected).map(el => el.value); 您可以使用 selectedOptions 属性 var options = document.getElementById('select-meal-type').selectedOptions; var values = Array.from(options).map(({ value }) => value); console.log(values); <select id="select-meal-type" multiple="multiple"> <option value="1">Breakfast</option> <option value="2" selected>Lunch</option> <option value="3">Dinner</option> <option value="4" selected>Snacks</option> <option value="5">Dessert</option> </select> ES6 [...select.options].filter(option => option.selected).map(option => option.value) 其中 select 是对 <select> 元素的引用。分解： [...select.options] 采用类似数组的选项列表并对其进行解构，以便我们可以在其上使用 Array.prototype 方法（编辑：还可以考虑使用 Array.from()） filter(...) 将选项减少为仅选定的选项 map(...) 将原始 <option> 元素转换为其各自的值如果你想走现代的路，你可以这样做： const selectedOpts = [...field.options].filter(x => x.selected); ... 运算符将可迭代 (HTMLOptionsCollection) 映射到数组。如果您只对值感兴趣，您可以添加 map() 调用： const selectedValues = [...field.options] .filter(x => x.selected) .map(x => x.value); 检查一下： HTML： <a id="aSelect" href="#">Select</a> <br /> <asp:ListBox ID="lstSelect" runat="server" SelectionMode="Multiple" Width="100px"> <asp:ListItem Text="Raj" Value="1"></asp:ListItem> <asp:ListItem Text="Karan" Value="2"></asp:ListItem> <asp:ListItem Text="Riya" Value="3"></asp:ListItem> <asp:ListItem Text="Aman" Value="4"></asp:ListItem> <asp:ListItem Text="Tom" Value="5"></asp:ListItem> </asp:ListBox> JQUERY： $("#aSelect").click(function(){ var selectedValues = []; $("#lstSelect :selected").each(function(){ selectedValues.push($(this).val()); }); alert(selectedValues); return false; }); 点击此处查看演示首先，使用 Array.from 将 HTMLCollection 对象转换为数组。 let selectElement = document.getElementById('categorySelect') let selectedValues = Array.from(selectElement.selectedOptions) .map(option => option.value) // make sure you know what '.map' does // you could also do: selectElement.options 假设 multiSelect 是 Multiple-Select-Element，只需使用其 selectedOptions 属性即可： //show all selected options in the console: for ( var i = 0; i < multiSelect.selectedOptions.length; i++) { console.log( multiSelect.selectedOptions[i].value); } $('#select-meal-type :selected') 将包含所有选定项目的数组。 $('#select-meal-type option:selected').each(function() { alert($(this).val()); }); 与已经建议的几乎相同，但有点不同。与 Vanilla JS 中的 jQuery 代码差不多： selected = Array.prototype.filter.apply( select.options, [ function(o) { return o.selected; } ] ); 它似乎比 IE、FF 和 Safari 中的循环更快。我发现有趣的是 Chrome 和 Opera 中速度较慢。另一种方法是使用选择器： selected = Array.prototype.map.apply( select.querySelectorAll('option[selected="selected"]'), [function (o) { return o.value; }] ); 2019 年 10 月更新以下内容应该在所有现代浏览器上“独立”工作，无需任何依赖或转译。  <script> const showSelectedOptions = options => alert( [...options].filter(o => o.selected).map(o => o.value) ) </script> <select multiple onchange="showSelectedOptions(this.options)"> <option value='1'>one</option> <option value='2'>two</option> <option value='3'>three</option> <option value='4'>four</option> </select> 如果您需要响应更改，可以尝试以下操作： document.getElementById('select-meal-type').addEventListener('change', function(e) { let values = [].slice.call(e.target.selectedOptions).map(a => a.value)); }) 需要 [].slice.call(e.target.selectedOptions)，因为 e.target.selectedOptions 返回 HTMLCollection，而不是 Array。该调用将其转换为 Array，以便我们可以应用 map 函数来提取值。检查这个： HTML： <select id="test" multiple> <option value="red" selected>Red</option> <option value="rock" selected>Rock</option> <option value="sun">Sun</option> </select> Javascript一行代码 Array.from(document.getElementById("test").options).filter(option => option.selected).map(option => option.value); 如果您希望在每个值后用中断来表示； $('#select-meal-type').change(function(){ var meals = $(this).val(); var selectedmeals = meals.join(", "); // there is a break after comma alert (selectedmeals); // just for testing what will be printed }) 试试这个： $('#select-meal-type').change(function(){ var arr = $(this).val() }); 演示 $('#select-meal-type').change(function(){ var arr = $(this).val(); console.log(arr) }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="select-meal-type" multiple="multiple"> <option value="1">Breakfast</option> <option value="2">Lunch</option> <option value="3">Dinner</option> <option value="4">Snacks</option> <option value="5">Dessert</option> </select> 小提琴这是一个 ES6 实现： value = Array(...el.options).reduce((acc, option) => { if (option.selected === true) { acc.push(option.value); } return acc; }, []); 基于 Rick Viscomi 的答案，尝试使用 HTML 选择元素的 selectedOptions 属性： let txtSelectedValuesObj = document.getElementById('txtSelectedValues'); [...txtSelectedValuesObj.selectedOptions].map(option => option.value); 详细一点， selectedOptions 返回所选项目的列表。具体来说，它返回一个包含 HTMLOptionElements 的只读 HTMLCollection。 ... 是扩展语法。它扩展了 HTMLCollection 的元素。 [...] 从这些元素创建一个可变的 Array 对象，为您提供一个 HTMLOptionElements 数组。 map() 将数组中的每个 HTMLObjectElement（此处称为 option）替换为其值 (option.value)。密集，但似乎有效。小心，selectedOptions IE 不支持！我的选择如下： let selectElement = document.getElementById('categorySelect'); let selectedOptions = selectElement.selectedOptions || [].filter.call(selectedElement.options, option => option.selected); let selectedValues = [].map.call(selectedOptions, option => option.value); 它很短，在现代浏览器上很快，我们不在乎它在 1% 市场份额的浏览器上是否快。注意，selectedOptions 在大约 5 年前的某些浏览器上有奇怪的行为，因此用户代理嗅探在这里并不是完全不合时宜的。您可以在提交表单时从 <select> 获取数组形式的值，如下例所示： const form = document.getElementById('form-upload'); form.addEventListener('change', (e) => { const formData = new FormData(form); const selectValue = formData.getAll('pets'); console.log(selectValue); }) <form id="form-upload"> <select name="pets" multiple id="pet-select"> <option value="">--Please choose an option--</option> <option value="dog">Dog</option> <option value="cat">Cat</option> <option value="hamster">Hamster</option> <option value="parrot">Parrot</option> <option value="spider">Spider</option> <option value="goldfish">Goldfish</option> </select> </form> 你可以尝试这个脚本 <!DOCTYPE html> <html> <script> function getMultipleSelectedValue() { var x=document.getElementById("alpha"); for (var i = 0; i < x.options.length; i++) { if(x.options[i].selected ==true){ alert(x.options[i].value); } } } </script> </head> <body> <select multiple="multiple" id="alpha"> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> <option value="d">D</option> </select> <input type="button" value="Submit" onclick="getMultipleSelectedValue()"/> </body> </html> 您可以使用 [].reduce 来更紧凑地实现 RobG 的方法： var getSelectedValues = function(selectElement) { return [].reduce.call(selectElement.options, function(result, option) { if (option.selected) result.push(option.value); return result; }, []); }; 我的模板助手看起来像这样： 'submit #update': function(event) { event.preventDefault(); var obj_opts = event.target.tags.selectedOptions; //returns HTMLCollection var array_opts = Object.values(obj_opts); //convert to array var stray = array_opts.map((o)=> o.text ); //to filter your bits: text, value or selected //do stuff } 与之前的答案相同，但使用 underscore.js。 function getSelectValues(select) { return _.map(_.filter(select.options, function(opt) { return opt.selected; }), function(opt) { return opt.value || opt.text; }); } 无需jquery即可在任何地方工作： var getSelectValues = function (select) { var ret = []; // fast but not universally supported if (select.selectedOptions != undefined) { for (var i=0; i < select.selectedOptions.length; i++) { ret.push(select.selectedOptions[i].value); } // compatible, but can be painfully slow } else { for (var i=0; i < select.options.length; i++) { if (select.options[i].selected) { ret.push(select.options[i].value); } } } return ret; }; 给你。 const arr = Array.from(el.features.selectedOptions) //get array from selectedOptions property const list = [] arr.forEach(item => list.push(item.value)) //push each item to empty array console.log(list) $('#application_student_groups option:selected').toArray().map(item => item.value) 您可以像这样创建自己的函数并在任何地方使用它 Pure JS /** * Get values from multiple select input field * @param {string} selectId - the HTML select id of the select field **/ function getMultiSelectValues(selectId) { // get the options of select field which will be HTMLCollection // remember HtmlCollection and not an array. You can always enhance the code by // verifying if the provided select is valid or not var options = document.getElementById(selectId).options; var values = []; // since options are HtmlCollection, we convert it into array to use map function on it Array.from(options).map(function(option) { option.selected ? values.push(option.value) : null }) return values; } 您可以在一行中使用 jQuery 获得相同的结果 $('#select_field_id').val() 这将返回井的值数组。

javascript html html-select

回答 0 投票 0

在数据列表中过滤选项时，如何将文本输入中的空格字符解释为下划线？

我有一个输入元素，用户可以在其中输入他们的时区或从下拉菜单中选择它。时区列表由官方 TZ 标识符组成。这些标识符遵循特定的

javascript html validation input html-select

回答 1 投票 0

使 <select> 显示为仅包含一项选择的可滚动列表？

我有一个看起来像这样的列表。选项1 选项2 选项3 我有一个 <select> 列表，如下所示。 <select> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> 我希望它看起来像这样。现在，这可以通过添加 multiple 和 size 属性来实现。 <select multiple size="3"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> 但这也允许用户选择多个元素。只是 size="3" 不起作用（至少在 Firefox 28.0 中）；它显示为下拉列表。规范这里似乎不包含任何可以做到这一点的属性，尽管它确实指出了浏览器不需要将选择元素呈现为滚动列表框。但是有什么方法可以让它看起来像我想要的，但仍然只允许单个选择？使用 JavaScript 的足够简单的解决方法对我来说也可以。根据我的经验，size="3"可以解决问题：http://jsfiddle.net/pU39G/ <select size="3">  <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> 在 Chrome 33 和 Firefox 27 上进行了测试。我仍然没有 Firefox 28，但如果它在那里不起作用，那似乎是一种回归。尺寸属性在 Android Chrome 中不起作用。也许有人可以确认 iOs 的行为？有什么建议可以在手机上工作吗？

html html-select

回答 2 投票 0

如何默认显示禁用的 HTML 选择选项？

我是 HTML 和 PHP 新手，也想从 MySQL 表和硬编码选项中实现下拉菜单。我的页面中有多个选择元素，其中之一是：我是 HTML 和 PHP 新手，也想从 MySQL 表和硬编码选项中实现下拉菜单。我的页面中有多个 select 元素，其中之一是： <select name="tagging"> <option value="">Choose Tagging</option> <option value="Option A">Option A</option> <option value="Option B">Option B</option> <option value="Option C">Option C</option> </select> 问题是现在用户还可以选择“选择标记”作为选项，但我只希望他们从可用的三个选项中进行选择。然后我使用 disabled 如下： <select name="tagging"> <option value="" disabled="disabled">Choose Tagging</option> <option value="Option A">Option A</option> <option value="Option B">Option B</option> <option value="Option C">Option C</option> </select> 但现在“选项A”成为默认选项。所以我想默认设置“选择标记”，并且还想从选择中禁用它。需要对另一个 select 执行同样的操作，它将从 MySQL 获取数据。有办法做到这一点吗？使用 <option selected="true" disabled="disabled">Choose Tagging</option> 使用hidden。 <select> <option hidden>Choose</option> <option>Item 1</option> <option>Item 2</option> </select> 这不会取消设置，但您可以在默认显示时将其隐藏在选项中。在 HTML5 中，选择禁用选项： <option selected disabled>Choose Tagging</option> 电子+反应。让你的两个第一个选项看起来像这样。 <option hidden="true">Choose Tagging</option> <option disabled="disabled" default="true">Choose Tagging</option> 关闭时首先显示。列表打开时首先显示的第二个。我知道您问如何禁用该选项，但我认为最终用户的视觉结果与此解决方案相同，尽管它可能稍微减少资源需求。使用 optgroup 标签，如下所示： <select name="tagging"> <optgroup label="Choose Tagging"> <option value="Option A">Option A</option> <option value="Option B">Option B</option> <option value="Option C">Option C</option> </optgroup> </select> 为那些想要将第一个选项保留为空的人提供的另一个 SELECT 标签解决方案。 <label>Unreal :</label> <select name="unreal"> <option style="display:none"></option> <option>Money</option> <option>Country</option> <option>God</option> </select> 在您要默认选择的 selected 上使用 option。 <select name="dept" id="dept"> <option value =''disabled selected>Select Department</option> <option value="Computer">Computer</option> <option value="electronics">Electronics</option> <option value="aidt">AIDT</option> <option value="civil">Civil</option> </select> selected disabled="true" 用这个。它将在新浏览器中工作我们可以禁用这种技术。 <select class="form-control" name="option_select"> <option selected="true" disabled="disabled">Select option </option> <option value="Option A">Option A</option> <option value="Option B">Option B</option> <option value="Option C">Option C</option> </select> 如果你使用 jQuery 来填充你的选择元素，你可以使用这个： html <select id="tagging"></select> js array_of_options = ['Choose Tagging', 'Option A', 'Option B', 'Option C'] $.each(array_of_options, function(i, item) { if(i==0) { sel_op = 'selected'; dis_op = 'disabled'; } else { sel_op = ''; dis_op = ''; } $('<option ' + sel_op + ' ' + dis_op + '/>').val(item).html(item).appendTo('#tagging'); }) 这将允许用户将第一个选项视为禁用标题（“选择标记”），并选择所有其他选项。这应该有帮助......:) <label for="cars">Choose a car:</label> <select name="cars" id="cars"> <option value=""selected="true" disabled="disabled"> Select</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> 这将为您隐藏选项，这样更容易制作其他下拉框 <option selected="true" disabled="disabled">Choose Tagging</option> 您可以设置默认选择哪个选项，如下所示： <option value="" selected>Choose Tagging</option> 我建议使用 javascript 和 JQuery 来观察点击事件，并在选择另一个选项后禁用第一个选项：首先，为元素指定一个 ID，如下所示： <select id="option_select" name="tagging"> 和选项 id : <option value="" id="initial">Choose Tagging</option> 然后： <script type="text/javascript"> $('option_select').observe(click, handleClickFunction); 然后你只需创建函数： function handleClickFunction () { if ($('option_select').value !== "option_select") { $('initial').disabled=true; } }

html html-select

回答 0 投票 0

如何默认显示禁用 HTML 选择选项？

我是 HTML 和 PHP 新手，想要从 mysql 表实现下拉菜单并进行硬编码。我的页面中有多个选择，其中之一是我是 HTML 和 PHP 新手，想要从 mysql 表实现下拉菜单并进行硬编码。我的页面中有多个选择，其中之一是 <select name="tagging"> <option value="">Choose Tagging</option> <option value="Option A">Option A</option> <option value="Option B">Option B</option> <option value="Option C">Option C</option> </select> 现在的问题是用户还可以选择“选择标签”作为他的标签，但我只想让他从可用的三个标签中进行选择。我使用禁用作为 <select name="tagging"> <option value="" disabled="disabled">Choose Tagging</option> <option value="Option A">Option A</option> <option value="Option B">Option B</option> <option value="Option C">Option C</option> </select> 但现在“选项A”成为默认选项。所以我想将“选择标记”设置为默认值，并且还想从选择中禁用它。这是一种方法吗？需要对其他从 Mysql 获取数据的 select 执行同样的操作。任何建议将不胜感激。使用 <option selected="true" disabled="disabled">Choose Tagging</option> 使用hidden。 <select> <option hidden>Choose</option> <option>Item 1</option> <option>Item 2</option> </select> 这不会取消设置，但您可以在默认显示时将其隐藏在选项中。在 HTML5 中，选择禁用选项： <option selected disabled>Choose Tagging</option> 电子+反应。让你的两个第一个选项看起来像这样。 <option hidden="true">Choose Tagging</option> <option disabled="disabled" default="true">Choose Tagging</option> 关闭时首先显示。列表打开时首先显示的第二个。我知道您问如何禁用该选项，但我认为最终用户的视觉结果与此解决方案相同，尽管它可能稍微减少资源需求。使用 optgroup 标签，如下所示： <select name="tagging"> <optgroup label="Choose Tagging"> <option value="Option A">Option A</option> <option value="Option B">Option B</option> <option value="Option C">Option C</option> </optgroup> </select> 为那些想要将第一个选项保留为空的人提供的另一个 SELECT 标签解决方案。 <label>Unreal :</label> <select name="unreal"> <option style="display:none"></option> <option>Money</option> <option>Country</option> <option>God</option> </select> 在您要默认选择的 selected 上使用 option。 <select name="dept" id="dept"> <option value =''disabled selected>Select Department</option> <option value="Computer">Computer</option> <option value="electronics">Electronics</option> <option value="aidt">AIDT</option> <option value="civil">Civil</option> </select> selected disabled="true" 用这个。它将在新浏览器中工作我们可以禁用这种技术。 <select class="form-control" name="option_select"> <option selected="true" disabled="disabled">Select option </option> <option value="Option A">Option A</option> <option value="Option B">Option B</option> <option value="Option C">Option C</option> </select> 如果您使用 jQuery 来填充选择元素，则可以使用以下命令： html <select id="tagging"></select> js array_of_options = ['Choose Tagging', 'Option A', 'Option B', 'Option C'] $.each(array_of_options, function(i, item) { if(i==0) { sel_op = 'selected'; dis_op = 'disabled'; } else { sel_op = ''; dis_op = ''; } $('<option ' + sel_op + ' ' + dis_op + '/>').val(item).html(item).appendTo('#tagging'); }) 这将允许用户将第一个选项视为禁用标题（“选择标记”），并选择所有其他选项。这应该有帮助......:) <label for="cars">Choose a car:</label> <select name="cars" id="cars"> <option value=""selected="true" disabled="disabled"> Select</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> 这将为您隐藏选项，这样更容易制作其他下拉框 <option selected="true" disabled="disabled">Choose Tagging</option> 您可以设置默认选择哪个选项，如下所示： <option value="" selected>Choose Tagging</option> 我建议使用 javascript 和 JQuery 来观察点击事件，并在选择另一个选项后禁用第一个选项：首先，为元素指定一个 ID，如下所示： <select id="option_select" name="tagging"> 和选项 id : <option value="" id="initial">Choose Tagging</option> 然后： <script type="text/javascript"> $('option_select').observe(click, handleClickFunction); 然后你只需创建函数： function handleClickFunction () { if ($('option_select').value !== "option_select") { $('initial').disabled=true; } }

html html-select

回答 0 投票 0

SelectList 中的选定项目未显示在视图下拉列表中

我有一个 asp.net MVC 应用程序，其中有一个用于创建新事件的 Razor 视图。表单上有一个季节下拉列表，供用户选择。我希望当前季节...

asp.net-mvc html-select default selectlist

回答 2 投票 0

使用 HTML 选择多个项目 <select> 使用触摸屏

在多模式下使用 HTML ，如何使用触摸屏设备选择多个项目？拖放或滑动无法用于选择，已经用于滚动... 在 <select> 模式下使用 HTML multiple，如何启用使用触摸屏设备选择多个项目？无法使用拖放或滑动进行选择，已用于滚动列表的滚动条双击/双击已用于打开所选元素（例如，像在文件资源管理器中一样）有内置的 HTML5 方法可以做到这一点吗？ select { width: 10em; height: 12em; } <select multiple> <option>Dog</option> <option>Cat</option> <option>Hamster</option> <option>Parrot</option> <option>Spider</option> <option>Goldfish</option> <option>Elephant</option> <option>Mouse</option> <option>Bee</option> <option>Sheep</option> <option>Fox</option> </select> 注意：这是 Android 上默认显示的方式，但我不想要这种设计，因为当我们不点击它时，我们看不到所选元素：似乎没有原生 HTML5 方法可以帮助您。您可以使用 select2 或类似的库，或者尝试这个（如果它适合您）我们可以使用媒体查询隐藏正常选择，并在移动设备上选择其中的选项 document.addEventListener('DOMContentLoaded', () => { const dropBtn = document.getElementById('dropbtn'); const dropdownContent = document.getElementById('myDropdown'); dropBtn.addEventListener('click', () => { dropdownContent.hidden = !dropdownContent.hidden; }); window.addEventListener('click', (event) => { const tgt = event.target; const parent = tgt.closest('#myDropdown') if (!tgt.matches('#dropbtn') && !parent) { dropdownContent.hidden = true; } }); dropdownContent.addEventListener('click', (event) => { event.preventDefault(); const tgt = event.target.closest('a'); if (!tgt) return tgt.classList.toggle('active'); // we COULD select a hidden select here }); }); .dropdown { position: relative; display: inline-block; } .dropdown-content { position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a.active { background-color: lightblue; } <div class="dropdown"> <button id="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content" hidden> <a href="#">Option 1</a> <a href="#">Option 2</a> <a href="#">Option 3</a> </div> </div>

javascript html responsive-design html-select touchscreen

回答 0 投票 0

引导选择选择器 - 如何使用 javascript 将搜索文本放入选择选择器搜索框中并触发下拉列表以显示搜索结果？

我正在构建 Razor Pages ASP.NET CORE 3.0 Web 应用程序。我正在使用具有“data-live-search= true”的 Bootstrap“selectpicker”下拉列表。我正在用 n 填充下拉列表...

javascript jquery bootstrap-4 html-select bootstrap-selectpicker

回答 1 投票 0

我们可以在option元素中添加class属性吗？

我想为我的选项元素添加类。在 HTML option 元素中添加 class 属性是否有效？

html attributes html-select

回答 4 投票 0

如何在Wordpress中获取所有国家/地区的下拉列表

是否有一种更短的方法可以让所有国家/地区填充选项，而不是在下面的下拉列表中逐一编写选项？是否有一种更短的方法来让所有国家/地区填充选项，而不是在下面的下拉列表中逐一编写选项？ <select name="input-country" id="input-country" class="form-control form-control-alternative"> <option value="">Select a country / region…</option> <option value="AF">Afghanistan</option> <option value="AX">Åland Islands</option> <option value="AL">Albania</option> </select> 或者如何在 Wordpress 中获取所有国家/地区的下拉列表？以下自定义短代码将显示国家/地区下拉列表： // Utility function: Return an array of countries (code / name pairs) function get_all_countries() { return array( 'AF' => __('Afghanistan'), 'AX' => __('Åland Islands'), 'AL' => __('Albania'), 'DZ' => __('Algeria'), 'AS' => __('American Samoa'), 'AD' => __('Andorra'), 'AO' => __('Angola'), 'AI' => __('Anguilla'), 'AQ' => __('Antarctica'), 'AG' => __('Antigua and Barbuda'), 'AR' => __('Argentina'), 'AM' => __('Armenia'), 'AW' => __('Aruba'), 'AU' => __('Australia'), 'AT' => __('Austria'), 'AZ' => __('Azerbaijan'), 'BS' => __('Bahamas'), 'BH' => __('Bahrain'), 'BD' => __('Bangladesh'), 'BB' => __('Barbados'), 'BY' => __('Belarus'), 'PW' => __('Belau'), 'BE' => __('Belgium'), 'BZ' => __('Belize'), 'BJ' => __('Benin'), 'BM' => __('Bermuda'), 'BT' => __('Bhutan'), 'BO' => __('Bolivia'), 'BQ' => __('Bonaire, Saint Eustatius and Saba'), 'BA' => __('Bosnia and Herzegovina'), 'BW' => __('Botswana'), 'BV' => __('Bouvet Island'), 'BR' => __('Brazil'), 'IO' => __('British Indian Ocean Territory'), 'BN' => __('Brunei'), 'BG' => __('Bulgaria'), 'BF' => __('Burkina Faso'), 'BI' => __('Burundi'), 'KH' => __('Cambodia'), 'CM' => __('Cameroon'), 'CA' => __('Canada'), 'CV' => __('Cape Verde'), 'KY' => __('Cayman Islands'), 'CF' => __('Central African Republic'), 'TD' => __('Chad'), 'CL' => __('Chile'), 'CN' => __('China'), 'CX' => __('Christmas Island'), 'CC' => __('Cocos (Keeling) Islands'), 'CO' => __('Colombia'), 'KM' => __('Comoros'), 'CG' => __('Congo (Brazzaville)'), 'CD' => __('Congo (Kinshasa)'), 'CK' => __('Cook Islands'), 'CR' => __('Costa Rica'), 'HR' => __('Croatia'), 'CU' => __('Cuba'), 'CW' => __('Curaçao'), 'CY' => __('Cyprus'), 'CZ' => __('Czech Republic'), 'DK' => __('Denmark'), 'DJ' => __('Djibouti'), 'DM' => __('Dominica'), 'DO' => __('Dominican Republic'), 'EC' => __('Ecuador'), 'EG' => __('Egypt'), 'SV' => __('El Salvador'), 'GQ' => __('Equatorial Guinea'), 'ER' => __('Eritrea'), 'EE' => __('Estonia'), 'SZ' => __('Eswatini'), 'ET' => __('Ethiopia'), 'FK' => __('Falkland Islands'), 'FO' => __('Faroe Islands'), 'FJ' => __('Fiji'), 'FI' => __('Finland'), 'FR' => __('France'), 'GF' => __('French Guiana'), 'PF' => __('French Polynesia'), 'TF' => __('French Southern Territories'), 'GA' => __('Gabon'), 'GM' => __('Gambia'), 'GE' => __('Georgia'), 'DE' => __('Germany'), 'GH' => __('Ghana'), 'GI' => __('Gibraltar'), 'GR' => __('Greece'), 'GL' => __('Greenland'), 'GD' => __('Grenada'), 'GP' => __('Guadeloupe'), 'GU' => __('Guam'), 'GT' => __('Guatemala'), 'GG' => __('Guernsey'), 'GN' => __('Guinea'), 'GW' => __('Guinea-Bissau'), 'GY' => __('Guyana'), 'HT' => __('Haiti'), 'HM' => __('Heard Island and McDonald Islands'), 'HN' => __('Honduras'), 'HK' => __('Hong Kong'), 'HU' => __('Hungary'), 'IS' => __('Iceland'), 'IN' => __('India'), 'ID' => __('Indonesia'), 'IR' => __('Iran'), 'IQ' => __('Iraq'), 'IE' => __('Ireland'), 'IM' => __('Isle of Man'), 'IL' => __('Israel'), 'IT' => __('Italy'), 'CI' => __('Ivory Coast'), 'JM' => __('Jamaica'), 'JP' => __('Japan'), 'JE' => __('Jersey'), 'JO' => __('Jordan'), 'KZ' => __('Kazakhstan'), 'KE' => __('Kenya'), 'KI' => __('Kiribati'), 'KW' => __('Kuwait'), 'KG' => __('Kyrgyzstan'), 'LA' => __('Laos'), 'LV' => __('Latvia'), 'LB' => __('Lebanon'), 'LS' => __('Lesotho'), 'LR' => __('Liberia'), 'LY' => __('Libya'), 'LI' => __('Liechtenstein'), 'LT' => __('Lithuania'), 'LU' => __('Luxembourg'), 'MO' => __('Macao'), 'MG' => __('Madagascar'), 'MW' => __('Malawi'), 'MY' => __('Malaysia'), 'MV' => __('Maldives'), 'ML' => __('Mali'), 'MT' => __('Malta'), 'MH' => __('Marshall Islands'), 'MQ' => __('Martinique'), 'MR' => __('Mauritania'), 'MU' => __('Mauritius'), 'YT' => __('Mayotte'), 'MX' => __('Mexico'), 'FM' => __('Micronesia'), 'MD' => __('Moldova'), 'MC' => __('Monaco'), 'MN' => __('Mongolia'), 'ME' => __('Montenegro'), 'MS' => __('Montserrat'), 'MA' => __('Morocco'), 'MZ' => __('Mozambique'), 'MM' => __('Myanmar'), 'NA' => __('Namibia'), 'NR' => __('Nauru'), 'NP' => __('Nepal'), 'NL' => __('Netherlands'), 'NC' => __('New Caledonia'), 'NZ' => __('New Zealand'), 'NI' => __('Nicaragua'), 'NE' => __('Niger'), 'NG' => __('Nigeria'), 'NU' => __('Niue'), 'NF' => __('Norfolk Island'), 'KP' => __('North Korea'), 'MK' => __('North Macedonia'), 'MP' => __('Northern Mariana Islands'), 'NO' => __('Norway'), 'OM' => __('Oman'), 'PK' => __('Pakistan'), 'PS' => __('Palestinian Territory'), 'PA' => __('Panama'), 'PG' => __('Papua New Guinea'), 'PY' => __('Paraguay'), 'PE' => __('Peru'), 'PH' => __('Philippines'), 'PN' => __('Pitcairn'), 'PL' => __('Poland'), 'PT' => __('Portugal'), 'PR' => __('Puerto Rico'), 'QA' => __('Qatar'), 'RE' => __('Reunion'), 'RO' => __('Romania'), 'RU' => __('Russia'), 'RW' => __('Rwanda'), 'ST' => __('São Tomé and Príncipe'), 'BL' => __('Saint Barthélemy'), 'SH' => __('Saint Helena'), 'KN' => __('Saint Kitts and Nevis'), 'LC' => __('Saint Lucia'), 'SX' => __('Saint Martin (Dutch part)'), 'MF' => __('Saint Martin (French part)'), 'PM' => __('Saint Pierre and Miquelon'), 'VC' => __('Saint Vincent and the Grenadines'), 'WS' => __('Samoa'), 'SM' => __('San Marino'), 'SA' => __('Saudi Arabia'), 'SN' => __('Senegal'), 'RS' => __('Serbia'), 'SC' => __('Seychelles'), 'SL' => __('Sierra Leone'), 'SG' => __('Singapore'), 'SK' => __('Slovakia'), 'SI' => __('Slovenia'), 'SB' => __('Solomon Islands'), 'SO' => __('Somalia'), 'ZA' => __('South Africa'), 'GS' => __('South Georgia/Sandwich Islands'), 'KR' => __('South Korea'), 'SS' => __('South Sudan'), 'ES' => __('Spain'), 'LK' => __('Sri Lanka'), 'SD' => __('Sudan'), 'SR' => __('Suriname'), 'SJ' => __('Svalbard and Jan Mayen'), 'SE' => __('Sweden'), 'CH' => __('Switzerland'), 'SY' => __('Syria'), 'TW' => __('Taiwan'), 'TJ' => __('Tajikistan'), 'TZ' => __('Tanzania'), 'TH' => __('Thailand'), 'TL' => __('Timor-Leste'), 'TG' => __('Togo'), 'TK' => __('Tokelau'), 'TO' => __('Tonga'), 'TT' => __('Trinidad and Tobago'), 'TN' => __('Tunisia'), 'TR' => __('Turkey'), 'TM' => __('Turkmenistan'), 'TC' => __('Turks and Caicos Islands'), 'TV' => __('Tuvalu'), 'UG' => __('Uganda'), 'UA' => __('Ukraine'), 'AE' => __('United Arab Emirates'), 'GB' => __('United Kingdom (UK)'), 'US' => __('United States (US)'), 'UM' => __('United States (US) Minor Outlying Islands'), 'UY' => __('Uruguay'), 'UZ' => __('Uzbekistan'), 'VU' => __('Vanuatu'), 'VA' => __('Vatican'), 'VE' => __('Venezuela'), 'VN' => __('Vietnam'), 'VG' => __('Virgin Islands (British)'), 'VI' => __('Virgin Islands (US)'), 'WF' => __('Wallis and Futuna'), 'EH' => __('Western Sahara'), 'YE' => __('Yemen'), 'ZM' => __('Zambia'), 'ZW' => __('Zimbabwe'), ); } // Shortcode that displays a country dropdown add_shortcode ('countries', 'countries_dropdown' ); function countries_dropdown() { $html = '<select name="input-country" id="input-country" class="form-control form-control-alternative"> <option value="">'.__('Select a country / region…').'</option>'; foreach ( get_all_countries() as $code => $name ) { $html .= sprintf('<option value="%s">%s</option>', $code, $name ); } return $html . '</select>'; } 用途：在 WordPress 帖子/页面编辑器中，在某些小部件中：[countries]；在 PHP 文件中：echo do_shortcode('[countries]');

php wordpress html-select shortcode countries

回答 0 投票 0

Wordpress 如何添加所有国家/地区

选择国家/地区... <select name="input-country" id="input-country" class="form-control form-control-alternative"> <option value="">Select a country / region…</option> <option value="AF">Afghanistan</option> <option value="AX">Åland Islands</option> <option value="AL">Albania</option> </select> 有没有更短的方法而不是一一写下<option value="AL">Albania</option>值？以下自定义短代码将显示国家/地区下拉列表： // Utility function: Return an array of countries (code / name pairs) function get_all_countries() { return array( 'AF' => __('Afghanistan'), 'AX' => __('Åland Islands'), 'AL' => __('Albania'), 'DZ' => __('Algeria'), 'AS' => __('American Samoa'), 'AD' => __('Andorra'), 'AO' => __('Angola'), 'AI' => __('Anguilla'), 'AQ' => __('Antarctica'), 'AG' => __('Antigua and Barbuda'), 'AR' => __('Argentina'), 'AM' => __('Armenia'), 'AW' => __('Aruba'), 'AU' => __('Australia'), 'AT' => __('Austria'), 'AZ' => __('Azerbaijan'), 'BS' => __('Bahamas'), 'BH' => __('Bahrain'), 'BD' => __('Bangladesh'), 'BB' => __('Barbados'), 'BY' => __('Belarus'), 'PW' => __('Belau'), 'BE' => __('Belgium'), 'BZ' => __('Belize'), 'BJ' => __('Benin'), 'BM' => __('Bermuda'), 'BT' => __('Bhutan'), 'BO' => __('Bolivia'), 'BQ' => __('Bonaire, Saint Eustatius and Saba'), 'BA' => __('Bosnia and Herzegovina'), 'BW' => __('Botswana'), 'BV' => __('Bouvet Island'), 'BR' => __('Brazil'), 'IO' => __('British Indian Ocean Territory'), 'BN' => __('Brunei'), 'BG' => __('Bulgaria'), 'BF' => __('Burkina Faso'), 'BI' => __('Burundi'), 'KH' => __('Cambodia'), 'CM' => __('Cameroon'), 'CA' => __('Canada'), 'CV' => __('Cape Verde'), 'KY' => __('Cayman Islands'), 'CF' => __('Central African Republic'), 'TD' => __('Chad'), 'CL' => __('Chile'), 'CN' => __('China'), 'CX' => __('Christmas Island'), 'CC' => __('Cocos (Keeling) Islands'), 'CO' => __('Colombia'), 'KM' => __('Comoros'), 'CG' => __('Congo (Brazzaville)'), 'CD' => __('Congo (Kinshasa)'), 'CK' => __('Cook Islands'), 'CR' => __('Costa Rica'), 'HR' => __('Croatia'), 'CU' => __('Cuba'), 'CW' => __('Curaçao'), 'CY' => __('Cyprus'), 'CZ' => __('Czech Republic'), 'DK' => __('Denmark'), 'DJ' => __('Djibouti'), 'DM' => __('Dominica'), 'DO' => __('Dominican Republic'), 'EC' => __('Ecuador'), 'EG' => __('Egypt'), 'SV' => __('El Salvador'), 'GQ' => __('Equatorial Guinea'), 'ER' => __('Eritrea'), 'EE' => __('Estonia'), 'SZ' => __('Eswatini'), 'ET' => __('Ethiopia'), 'FK' => __('Falkland Islands'), 'FO' => __('Faroe Islands'), 'FJ' => __('Fiji'), 'FI' => __('Finland'), 'FR' => __('France'), 'GF' => __('French Guiana'), 'PF' => __('French Polynesia'), 'TF' => __('French Southern Territories'), 'GA' => __('Gabon'), 'GM' => __('Gambia'), 'GE' => __('Georgia'), 'DE' => __('Germany'), 'GH' => __('Ghana'), 'GI' => __('Gibraltar'), 'GR' => __('Greece'), 'GL' => __('Greenland'), 'GD' => __('Grenada'), 'GP' => __('Guadeloupe'), 'GU' => __('Guam'), 'GT' => __('Guatemala'), 'GG' => __('Guernsey'), 'GN' => __('Guinea'), 'GW' => __('Guinea-Bissau'), 'GY' => __('Guyana'), 'HT' => __('Haiti'), 'HM' => __('Heard Island and McDonald Islands'), 'HN' => __('Honduras'), 'HK' => __('Hong Kong'), 'HU' => __('Hungary'), 'IS' => __('Iceland'), 'IN' => __('India'), 'ID' => __('Indonesia'), 'IR' => __('Iran'), 'IQ' => __('Iraq'), 'IE' => __('Ireland'), 'IM' => __('Isle of Man'), 'IL' => __('Israel'), 'IT' => __('Italy'), 'CI' => __('Ivory Coast'), 'JM' => __('Jamaica'), 'JP' => __('Japan'), 'JE' => __('Jersey'), 'JO' => __('Jordan'), 'KZ' => __('Kazakhstan'), 'KE' => __('Kenya'), 'KI' => __('Kiribati'), 'KW' => __('Kuwait'), 'KG' => __('Kyrgyzstan'), 'LA' => __('Laos'), 'LV' => __('Latvia'), 'LB' => __('Lebanon'), 'LS' => __('Lesotho'), 'LR' => __('Liberia'), 'LY' => __('Libya'), 'LI' => __('Liechtenstein'), 'LT' => __('Lithuania'), 'LU' => __('Luxembourg'), 'MO' => __('Macao'), 'MG' => __('Madagascar'), 'MW' => __('Malawi'), 'MY' => __('Malaysia'), 'MV' => __('Maldives'), 'ML' => __('Mali'), 'MT' => __('Malta'), 'MH' => __('Marshall Islands'), 'MQ' => __('Martinique'), 'MR' => __('Mauritania'), 'MU' => __('Mauritius'), 'YT' => __('Mayotte'), 'MX' => __('Mexico'), 'FM' => __('Micronesia'), 'MD' => __('Moldova'), 'MC' => __('Monaco'), 'MN' => __('Mongolia'), 'ME' => __('Montenegro'), 'MS' => __('Montserrat'), 'MA' => __('Morocco'), 'MZ' => __('Mozambique'), 'MM' => __('Myanmar'), 'NA' => __('Namibia'), 'NR' => __('Nauru'), 'NP' => __('Nepal'), 'NL' => __('Netherlands'), 'NC' => __('New Caledonia'), 'NZ' => __('New Zealand'), 'NI' => __('Nicaragua'), 'NE' => __('Niger'), 'NG' => __('Nigeria'), 'NU' => __('Niue'), 'NF' => __('Norfolk Island'), 'KP' => __('North Korea'), 'MK' => __('North Macedonia'), 'MP' => __('Northern Mariana Islands'), 'NO' => __('Norway'), 'OM' => __('Oman'), 'PK' => __('Pakistan'), 'PS' => __('Palestinian Territory'), 'PA' => __('Panama'), 'PG' => __('Papua New Guinea'), 'PY' => __('Paraguay'), 'PE' => __('Peru'), 'PH' => __('Philippines'), 'PN' => __('Pitcairn'), 'PL' => __('Poland'), 'PT' => __('Portugal'), 'PR' => __('Puerto Rico'), 'QA' => __('Qatar'), 'RE' => __('Reunion'), 'RO' => __('Romania'), 'RU' => __('Russia'), 'RW' => __('Rwanda'), 'ST' => __('São Tomé and Príncipe'), 'BL' => __('Saint Barthélemy'), 'SH' => __('Saint Helena'), 'KN' => __('Saint Kitts and Nevis'), 'LC' => __('Saint Lucia'), 'SX' => __('Saint Martin (Dutch part)'), 'MF' => __('Saint Martin (French part)'), 'PM' => __('Saint Pierre and Miquelon'), 'VC' => __('Saint Vincent and the Grenadines'), 'WS' => __('Samoa'), 'SM' => __('San Marino'), 'SA' => __('Saudi Arabia'), 'SN' => __('Senegal'), 'RS' => __('Serbia'), 'SC' => __('Seychelles'), 'SL' => __('Sierra Leone'), 'SG' => __('Singapore'), 'SK' => __('Slovakia'), 'SI' => __('Slovenia'), 'SB' => __('Solomon Islands'), 'SO' => __('Somalia'), 'ZA' => __('South Africa'), 'GS' => __('South Georgia/Sandwich Islands'), 'KR' => __('South Korea'), 'SS' => __('South Sudan'), 'ES' => __('Spain'), 'LK' => __('Sri Lanka'), 'SD' => __('Sudan'), 'SR' => __('Suriname'), 'SJ' => __('Svalbard and Jan Mayen'), 'SE' => __('Sweden'), 'CH' => __('Switzerland'), 'SY' => __('Syria'), 'TW' => __('Taiwan'), 'TJ' => __('Tajikistan'), 'TZ' => __('Tanzania'), 'TH' => __('Thailand'), 'TL' => __('Timor-Leste'), 'TG' => __('Togo'), 'TK' => __('Tokelau'), 'TO' => __('Tonga'), 'TT' => __('Trinidad and Tobago'), 'TN' => __('Tunisia'), 'TR' => __('Turkey'), 'TM' => __('Turkmenistan'), 'TC' => __('Turks and Caicos Islands'), 'TV' => __('Tuvalu'), 'UG' => __('Uganda'), 'UA' => __('Ukraine'), 'AE' => __('United Arab Emirates'), 'GB' => __('United Kingdom (UK)'), 'US' => __('United States (US)'), 'UM' => __('United States (US) Minor Outlying Islands'), 'UY' => __('Uruguay'), 'UZ' => __('Uzbekistan'), 'VU' => __('Vanuatu'), 'VA' => __('Vatican'), 'VE' => __('Venezuela'), 'VN' => __('Vietnam'), 'VG' => __('Virgin Islands (British)'), 'VI' => __('Virgin Islands (US)'), 'WF' => __('Wallis and Futuna'), 'EH' => __('Western Sahara'), 'YE' => __('Yemen'), 'ZM' => __('Zambia'), 'ZW' => __('Zimbabwe'), ); } // Shortcode that displays a country dropdown add_shortcode ('countries', 'countries_dropdown' ); function countries_dropdown() { $html = '<select name="input-country" id="input-country" class="form-control form-control-alternative"> <option value="">'.__('Select a country / region…').'</option>'; foreach ( get_all_countries() as $code => $name ) { $html .= sprintf('<option value="%s">%s</option>', $code, $name ); } return $html . '</select>'; } 用途：在 WordPress 帖子/页面编辑器中，在某些小部件中：[countries]；在 PHP 文件中：echo do_shortcode('[countries]');

wordpress html-select shortcode custom-wordpress-pages countries

回答 0 投票 0

以编程方式更改 Wordpress ContactForm7 下拉菜单选项

列出项目我想在我的网站中创建一个非常有用的 WordPress ContactForm7 部分。为了使其真正有用，我需要使用 JavaScrip 动态更改某些下拉菜单的值...

javascript wordpress drop-down-menu html-select contact-form-7

回答 1 投票 0

以编程方式更改 Wordpress 中的 ContactForm7 下拉菜单选择器选项

我想在我的网站中创建一个非常有用的 WordPress ContactForm7 部分。为了使其真正有用，我需要使用 JavaScript 动态更改某些下拉菜单的值。我没有...

javascript wordpress drop-down-menu html-select contact-form-7

回答 1 投票 0

@Html.ListBoxFor 不选择最初选择的元素

我在 ASP.NET Core 8 MVC 视图中有以下代码： @{ var listaAreas = new List(); if (Model.Areas!= nul... 我在 ASP.NET Core 8 MVC 视图中有此代码： <div class="mb-3 position-relative"> @{ var listaAreas = new List<SelectListItem>(); if (Model.Areas != null && Model.Areas.Any()) { var areasActuales = Model.Areas.Select(r => new SelectListItem() { Text = r.Area?.AreaNombre ?? string.Empty, Value = (r.Area?.AreaId ?? 0).ToString(), Selected = r.Selected }); listaAreas.AddRange(areasActuales); } } @Html.LabelFor(m => m.Areas) @Html.ListBoxFor(m => m.Areas, listaAreas, new { @class = "form-control", style = "width: 100%", multiple = "multiple" }) </div> 调用 listaAreas 时，这是 ListBoxFor 数组：即使唯一的选项有 Selected = true，HTML SELECT 标签也显示为未选中。这是怎么回事？编辑：我最后一次尝试，但没有成功： <div class="mb-3 position-relative"> @{ MultiSelectList? listaAreas = null; if (Model.Areas != null && Model.Areas.Any()) { listaAreas = new MultiSelectList(Model.Areas.Where(a => a.Area != null).Select(a => a.Area), "AreaId", "AreaNombre", Model.Areas.Where(a => a.Selected).Select(a => a.Area?.AreaId).ToArray()); } } @Html.LabelFor(m => m.Areas) @Html.ListBoxFor(m => m.Areas, listaAreas, new { @class = "form-control", style = "width: 100%", multiple = "multiple" }) </div> 即使唯一的选项 Selected = true，也会出现 HTML SELECT 标签没有选择。我已经删除了该属性，但同样的情况发生了根据您共享的代码片段和描述，我已尝试调查您的问题。但是，在 ASP.NET Core 中，没有预定义的标记帮助器来显示多选下拉列表。如果您想实现带复选框的下拉菜单或 onclick 保持下拉框中的项目处于选中状态，您应该使用基于 javaScript 的插件。我尝试使用 bootstrap-multiselect.js 来演示带有复选框的多选下拉列表。让我们看看如何在实践中实现这一点。控制器： public IActionResult MultiSelectCheckboxDropdown() { var multiSelectList = new List<SelectListItem> { new SelectListItem { Value = "1", Text = "C#" }, new SelectListItem { Value = "2", Text = "JavaScript" }, new SelectListItem { Value = "3", Text = "Python" }, new SelectListItem { Value = "4", Text = "Java" }, new SelectListItem { Value = "5", Text = "C++" }, new SelectListItem { Value = "6", Text = "Swift" }, new SelectListItem { Value = "7", Text = "Go" }, new SelectListItem { Value = "8", Text = "Ruby" }, new SelectListItem { Value = "9", Text = "TypeScript" }, new SelectListItem { Value = "10", Text = "PHP" } }; ViewBag.multiSelectList = multiSelectList; return View(); } 查看： <h3>Multi select</h3> @Html.DropDownList("Category", ViewBag.multiSelectList, null, new { @class = "selectpicker", multiple = "multiple", id = "Subjects_dropdown" })  @section scripts { <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.2/js/bootstrap-multiselect.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.2/css/bootstrap-multiselect.min.css"></script> <script> $(document).ready(function () { $('#myMultiSelect').select2(); $('#Subjects_dropdown').multiselect(); }); </script> } 输出：注意：请根据您的需要修改脚本和html。由于没有用于多选下拉列表的内置标签帮助器，所以我尝试与您分享这一点。如果您想检查更多样本，您可以查看此文档。

asp.net-core-mvc html-select html-helper

回答 1 投票 0

检测 ScrollTop() 的选项

我正在使用ajax加载选项我需要在滚动选项时检测scrollTop以调用ajax加载更多数据我搜索了很多关于scrollTop()的选项，但我发现......

javascript html-select

回答 1 投票 0

如何显示模板django中数据库中下拉列表中所有项目中所选项目的值

请帮助根据列表（项目）中所选的值自动填写字段（公司/修订），例如，如果在下拉列表中选择“PROJECT2”...

django database templates html-select

回答 1 投票 0

将多个选择选项放入 PHP 数组中

我有一个选择框列表。是否可以选择多个选项？我有一个选择框列表。可以选择多个选项吗？ <select name="access_list[ ]" size="7" multiple="multiple"> <?php $res=mysql_query("select * from list" ,$conn); while($row=mysql_fetch_assoc($res)) echo"<option value=".$row['id'].">".$row['name']."</option>";?> </select> 将要选择的值（一起选择多个值）如何存储在数组中？使用名称为 name="access_list[]"，不带空格。您可以使用 $_POST['access_list'] 获取选定的选项 $_POST['access_list'] 是包含所选选项的 array 将您选择的标签替换为： <select name="access_list[]" size="7" multiple="multiple"> 如果你想获取数组，你可以这样做： $data = $_POST['access_list']; print_r($data); 存储为数组然后在你的 php 中就像这样。 <?php $access_list = $_POST['access_list']; foreach($access_list as $value) { //Do your code Here } ?>

php arrays html-select store

回答 0 投票 0

jinja2 if else 在选择标签中

{% for t in tdata %} <select class="form-control" id="types" name="types" combojs="types"> {% for t in tdata %} <option value="{{ t[0] }}" {% if t[0] == t1is %} selected {% endif %}> {{ t[0] }} </option> {% endfor %} </select> 我使用 python Flask render_template 将 tdata 作为列表传递，并且 t1 作为选定的。这适用于下拉组合框，其中 t1 是显示的选定选项，但如果没有使用 t1is 选择，我也可以设置默认值吗？我尝试在选择后放置 {% else t[0] == "None" %} ，但我不知道这是否是正确的语法。当然这是行不通的。如果未选择任何内容，则显示第一项。我需要将默认项目设置为列表中的第一个吗？由于只有在 for 循环结束后才能确定没有匹配项，此时再将 selected 属性添加到所需的默认选项中就已经太晚了，因此您可以事先使用另一个循环来决定哪个选项已选择： {% set ns = namespace(selected="None") %} {% for t in tdata if t[0] == t1is %} {% set ns.selected = t1is %} {% endfor %} <select class="form-control" id="types" name="types" combojs="types"> {% for t in tdata %} <option value="{{ t[0] }}" {% if t[0] == ns.selected %} selected {% endif %}> {{ t[0] }} </option> {% endfor %} </select>

jinja2 html-select

回答 0 投票 0

可编辑的“选择”元素

我想在表单中有一个选择元素，但除了下拉列表中的选项之外，能够编辑它并添加新选项会很有用，但不能使用另一个输入文本，我需要全部输入...

html html-select

回答 6 投票 0

删除暴露的过滤器中的空选项

我有一个公开的过滤器，带有一个选择选项下拉字段，可收集当前视图中的所有实际值。不幸的是，它还收集并显示我视图中的空白字段。我有

php html-select drupal-exposed-filter

回答 1 投票 0

html-select 相关问题

最新问题