一个HTML用户界面元素，用于从有限的选项集合中选择一个或多个选项。
如何在html select中设置选项文本的span标签样式
堆栈闪电战 我有一个场景，我的 HTML 选择的第一个选项包含一个星号，该星号应该是红色的。但是我无法设置星号的样式，它总是出现在...
Joomla JForm 带外键、Ajax 和 jQuery 的链式选择
我想知道如何将链式选择列表集成到组件的管理员编辑视图中。 我有 2 个表：制造商和型号 两个表都使用列 id 和
当我使用引导选择时，选择选项不起作用。 $(函数() { $('.selectpicker').selectpicker(); }); .sc_表{ 高度：100vh； 溢出：滚动； } 当我使用引导选择时，选择选项不起作用。 $(function() { $('.selectpicker').selectpicker(); }); .sc_table { height: 100vh; overflow: scroll; } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script> <body> <div> <center> <h2>Transaction Creation</h2> </center> </div> <div class="container-fluid p-2 sc_table b-5"> <form action="" method="post"> <div class="mb-3"> <label for="FromACC" class="form-label" data-toggle="tooltip" data-placement="bottom" title="Cash/Bank when money goes out, interest account when need to process income as interest">Credit Account</label> <select id='FromACC' name='frmac' class="selectpicker" data-show-subtext="true" data-live-search="true"> <option data-tokens="dummy" value="0" selected>Select Account</option> <option data-tokens="13000013 - CashBank" value="13">13000013 - CashBank</option> <option data-tokens="202311433 - Interest Account" value="33">202311433 - Interest Account</option> <option data-tokens="202311934 - IIA" value="34">202311934 - IIA</option> <option data-tokens="202311735 - IEA" value="35">202311735 - IEA</option> <option data-tokens="13001313 - Cash" value="36">13001313 - Cash</option> <option data-tokens="13130013 - Bank" value="53">13130013 - Bank</option> </select> </div> <button type="submit" name="tran_submit" class="btn btn-primary">Submit</button> </form> </div> </body> 您遇到的 bootstrap-select 无法正常工作的问题可能是由于 Bootstrap 5 的 兼容性 问题。 您使用的 bootstrap-select 版本可能与 Bootstrap 5 不完全兼容。要解决此问题，您可以尝试使用与 Bootstrap 5 兼容的 bootstrap-select 版本，例如版本 1.14.0-beta2 或 later。 $(function() { $('.selectpicker').selectpicker(); }); .sc_table { height: 100vh; overflow: scroll; } <!-- Include Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Include jQuery --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <!-- Include Popper.js --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script> <!-- Include Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <!-- Include Bootstrap-Select CSS --> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" rel="stylesheet"> <!-- Include Bootstrap-Select JS (compatible version with Bootstrap 5) --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js"></script> <body> <div> <center> <h2>Transaction Creation</h2> </center> </div> <div class="container-fluid p-2 sc_table b-5"> <form action="" method="post"> <div class="mb-3"> <label for="FromACC" class="form-label" data-toggle="tooltip" data-placement="bottom" title="Cash/Bank when money goes out, interest account when need to process income as interest">Credit Account</label> <select id='FromACC' name='frmac' class="selectpicker" data-show-subtext="true" data-live-search="true"> <option data-tokens="dummy" value="0" selected>Select Account</option> <option data-tokens="13000013 - CashBank" value="13">13000013 - CashBank</option> <option data-tokens="202311433 - Interest Account" value="33">202311433 - Interest Account</option> <option data-tokens="202311934 - IIA" value="34">202311934 - IIA</option> <option data-tokens="202311735 - IEA" value="35">202311735 - IEA</option> <option data-tokens="13001313 - Cash" value="36">13001313 - Cash</option> <option data-tokens="13130013 - Bank" value="53">13130013 - Bank</option> </select> </div> <button type="submit" name="tran_submit" class="btn btn-primary">Submit</button> </form> </div> </body>
假设有可用的选项列表，如何用新的 更新 ？ 假设有可用的选项列表，如何用新的 <select> 更新 <option>？ 您可以使用 empty 方法删除现有选项，然后添加新选项： var option = $('<option></option>').attr("value", "option value").text("Text"); $("#selectId").empty().append(option); 如果您在对象中有新选项，您可以： var newOptions = {"Option 1": "value1", "Option 2": "value2", "Option 3": "value3" }; var $el = $("#selectId"); $el.empty(); // remove old options $.each(newOptions, function(key,value) { $el.append($("<option></option>") .attr("value", value).text(key)); }); 编辑：要删除除第一个之外的所有选项，您可以使用:gt选择器来获取索引大于零的所有option元素和remove它们： $('#selectId option:gt(0)').remove(); // remove all options, but not the first 我将 CMS 的出色答案放入快速 jQuery 扩展中： (function($, window) { $.fn.replaceOptions = function(options) { var self, $option; this.empty(); self = this; $.each(options, function(index, option) { $option = $("<option></option>") .attr("value", option.value) .text(option.text); self.append($option); }); }; })(jQuery, window); 它需要一个包含“text”和“value”键的对象数组。所以用法如下： var options = [ {text: "one", value: 1}, {text: "two", value: 2} ]; $("#foo").replaceOptions(options); $('#comboBx').append($("<option></option>").attr("value",key).text(value)); 其中comboBx是您的组合框ID。 或者您可以将选项作为字符串附加到已经存在的innerHTML，然后分配给选择的innerHTML。 编辑 如果您需要保留第一个选项并删除所有其他选项，那么您可以使用 var firstOption = $("#cmb1 option:first-child"); $("#cmb1").empty().append(firstOption); 由于某些奇怪的原因这部分 $el.empty(); // remove old options 来自 CMS 的解决方案对我来说不起作用，所以我只是简单地使用了这个 el.html(' '); 这是有效的。所以我的工作代码现在看起来像这样： var newOptions = { "Option 1":"option-1", "Option 2":"option-2" }; var $el = $('.selectClass'); $el.html(' '); $.each(newOptions, function(key, value) { $el.append($("<option></option>") .attr("value", value).text(key)); }); 删除和添加 DOM 元素比修改现有元素慢。 如果你的选项集具有相同的长度，你可以这样做： $('#my-select option') .each(function(index) { $(this).text('someNewText').val('someNewValue'); }); 如果您的新选项集具有不同的长度，您可以使用上述某些技术删除/添加您真正需要的空选项。 这有帮助吗？ $("#SelectName option[value='theValueOfOption']")[0].selected = true; 如果我们不断更新<select>并且我们需要保存以前的值: var newOptions = { 'Option 1':'value-1', 'Option 2':'value-2' }; var $el = $('#select'); var prevValue = $el.val(); $el.empty(); $.each(newOptions, function(key, value) { $el.append($('<option></option>').attr('value', value).text(key)); if (value === prevValue){ $el.val(value); } }); $el.trigger('change'); 传统的手工做事方式一直对我有好处。 清除选择并保留第一个选项： $('#your_select_id').find('option').remove() .end().append('<option value="0">Selec...</option>') .val('whatever'); 如果您的数据来自 Json 或其他任何形式（只需 Concat 数据）： var JSONObject = JSON.parse(data); newOptionsSelect = ''; for (var key in JSONObject) { if (JSONObject.hasOwnProperty(key)) { var newOptionsSelect = newOptionsSelect + '<option value="'+JSONObject[key]["value"]+'">'+JSONObject[key]["text"]+'</option>'; } } $('#your_select_id').append( newOptionsSelect ); 我的 Json 对象： [{"value":1,"text":"Text 1"},{"value":2,"text":"Text 2"},{"value":3,"text":"Text 3"}] 此解决方案非常适合使用 Ajax，并从数据库中以 Json 形式给出答案。 例如，如果您的 html 代码包含以下代码： <select id="selectId"><option>Test1</option><option>Test2</option></select> 为了更改选择中的选项列表，您可以使用以下代码。当您的名字选择名为 selectId 时。 var option = $('<option></option>').attr("value", "option value").text("Text"); $("#selectId").html(option); 在上面的示例中，我仅通过一个新选项更改了旧的选项列表。 大多数方法都是从删除所有现有选项并重新填充下拉列表开始的。但是，我更喜欢添加和删除单个选项，以避免更改当前选择（如果有）。 <option></option> <option value="12151d81-fe94-4007-8f1f-907aa8129d0a" data-text="Scrambled Eggs">Scrambled Eggs</option> 此示例假设选项 HTML 的结构如上。 options 是如下 JSON 数据： { "guid": "bf42ba25-02b3-4d49-b4cf-02467c4fc44d", "value": "Granola" }, { "guid": "89004730-bb92-4cd6-986a-28e228a94d54", "value": "Yogurt" } field 是输入对象。 function update_options(field, options) { // If item doesn't exist in dropdown, add it. $.each(options, function (index, item) { if (field.find(`option[value="${item.guid}"]`).length == 0) { $(`<option value="${item.guid}" data-text="${item.value}">${item.value}<\/option>`).appendTo(field); } }); // If item in dropdown doesn't exist in data, remove it. $.each(field.find('option'), function (index, item) { if (options.find(x => x.guid == item.value) == undefined) { field.find(`option[value="${item.value}"]`).remove(); } }); } 如果您有选项值/标签的数组或对象，则迭代每个选项并单独使用 .append() 的替代方法是映射到数组并调用 .append() 一次 const optionsArray = [ { value: 1, text: 'One' }, { value: 2, text: 'Two' }, ]; $('#array') .empty() .append( optionsArray.map(({ value, text }) => $('<option>', { value, text })), ); const optionsObject = { Three: 3, Four: 4, }; $('#object') .empty() .append( Object.entries(optionsObject).map(([text, value]) => $('<option>', { value, text }), ), ); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.slim.min.js"></script> <p> <select id="array"> <option>Remove me</option> </select> </p> <p> <select id="object"> <option>Remove me</option> </select> </p>
基本上我想调整脉轮选择框选项的大小。我发现这是元素中的老虎机徽章。 我尝试过多种选择。但没有一个有效 首先我尝试使用基本的 CSS 属性， ...
如何使联系表 7 中的“请选择...”不可选择？ （已回答）
如何使下拉菜单中的“请选择...”选项不可选择？我正在这个表单测试器中为联系表单 7 条件字段进行编码。这是我的 c...
如何使联系表 7 中的“请选择...”不可选择？ （first_as_label 不起作用）
如何使下拉菜单中的“请选择...”选项不可选择？我正在这个表单测试器中为联系表单 7 条件字段进行编码。这是我的 c...
如何使下拉菜单中的“请选择...”选项不可选择？我正在这个表单测试器中为联系表单 7 条件字段进行编码。这是我的 c...
如何使下拉菜单中的“请选择...”选项不可选择？我正在这个表单测试器中为联系表单 7 条件字段进行编码。这是我的 c...
如何通过 JavaScript 获取 <option> 中当前选定的 <select>？
如何通过 JavaScript 获取当前选定的 元素？ 如何通过 JavaScript 获取 <option> 元素的 currently 选定的 <select>？ 这将为您做到： var yourSelect = document.getElementById( "your-select-id" ); alert( yourSelect.options[ yourSelect.selectedIndex ].value ) .selectedIndex对象的select有索引；您可以使用它来索引 .options 数组。 使用 selectedOptions 属性： var yourSelect = document.getElementById("your-select-id"); alert(yourSelect.selectedOptions[0].value); 它适用于除 Internet Explorer 之外的所有浏览器。 如果您没有多项选择 你可以这样做。 var yourSelect = document.getElementById( "your-select-id" ); alert(yourSelect.selectedOptions[0].value) 将执行与所选答案相同的操作。因为 .selectedOptions 为您提供了所选选项元素的列表 或更短： document.getElementById( "your-select-id" ).value
我有以下格式的 HTML 文本： 极光 我有以下格式的 HTML 文本： <option value="http://www.torontoairportlimoflatrate.com/aurora-limousine-service.html">Aurora</option> <option value="http://www.torontoairportlimoflatrate.com/alexandria-limousine-service.html">Alexandria</option> 我已经尝试过： preg_match_all("#>\w*#",$data,$result); 返回结果如下 Array ( [0] => Array ( [0] => >Ajax [1] => > [2] => >Aurora [3] => > [4] => >Alexandria [5] => > [6] => >Alliston 我只想要一个选项文本值（城市）的平面数组 [0] => Ajax [1] => Aurora ... 如果您不想使用 HTML 解析器，可以使用正则表达式来完成，但请记住，您可能需要根据将来收到的输入内容来修改它。对于您的具体问题，这是一个可以完成这项工作的正则表达式： <?php preg_match_all('/<option\svalue=\"([a-zA-Z0-9-_.\/:]+)\">([a-zA-Z\s]+)<\/option>/', $data, $result); var_dump($result[2]); 注： 如果你想匹配每个 url，你应该用更强大的 url 匹配正则表达式替换 ([a-zA-Z0-9-_.\/:]+)。您也可以在 StackOverflow 上找到some，但对我来说这是个人品味问题。 使用合法的 DOM 解析器解析有效的 HTML，以享受可靠的过程和直观/富有表现力的语法。 getElementsByTagName() 可能是您定位所有 <option> 标签所需的全部。 代码：（演示） $html = <<<HTML <select> <option value="http://www.torontoairportlimoflatrate.com/aurora-limousine-service.html">Aurora</option> <option value="http://www.torontoairportlimoflatrate.com/alexandria-limousine-service.html">Alexandria</option> </select> HTML; $dom = new DOMDocument(); libxml_use_internal_errors(true); $dom->loadHTML($html); $options = []; foreach ($dom->getElementsByTagName('option') as $option) { $options[] = $option->nodeValue; } var_export($options); 输出： array ( 0 => 'Aurora', 1 => 'Alexandria', )
抱歉，如果标题令人困惑，但基本上我有一个反应组件，它呈现一个带有一堆选项的选择下拉列表。我想正常显示下拉列表中的选项，但是一旦选择...
我需要在同一个网页上放置几个相当大的下拉菜单（± 9000 个项目）。 使用 Tom Select 实现此目的最有效的方法是什么？ 初始化 9000 opt1...
我有一个列表，如下所示。我想双击一个项目，然后获取双击项目的项目索引。我正在使用 Edge / Chrome。它似乎可以在 Firefox 中运行。 看到 iss...
我不确定我是否在这里做了任何事情，而且我真的找不到任何关于此的文档。好的文档建议也很好。我尝试从 Laravel Collectives 中进行选择，但我...
我有一个具有 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 月更新 以下内容应该在所有现代浏览器上“独立”工作，无需任何依赖或转译。 <!-- display a pop-up with the selected values from the <select> element --> <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() 这将返回井的值数组。
在数据列表中过滤选项时，如何将文本输入中的空格字符解释为下划线？
我有一个输入元素，用户可以在其中输入他们的时区或从下拉菜单中选择它。时区列表由官方 TZ 标识符组成。这些标识符遵循特定的
我有一个看起来像这样的列表。 选项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"> <!-- Note: I've removed the 'multiple' attribute --> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> 在 Chrome 33 和 Firefox 27 上进行了测试。我仍然没有 Firefox 28，但如果它在那里不起作用，那似乎是一种回归。 尺寸属性在 Android Chrome 中不起作用。也许有人可以确认 iOs 的行为？有什么建议可以在手机上工作吗？
我是 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 和 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; } }